它说未定义 pathname ，但我不知道我的代码出了什么问题。它说当我从后端获取数据到前端时，突然发生了这些错误，并且在它无法执行反应状态更新之前未安装的组件无操作。我已经处理了该错误，但这些错误作为 typeerroror，显示未定义的“pathname”。

section.js 当我取消注释 app.js 时，会出现错误

import React, { useState, useEffect } from 'react'
import './Section.css'
import {Link} from "react-router-dom";
// import api from './api/post';

function Section() {
  const [posts, setPosts] = useState([]);

  const FetchPosts = async () => {
    const response = await fetch('http://localhost:5000/posts');
    setPosts(await response.json([]));
  }
  console.log(posts)
  useEffect(() => {
    FetchPosts();
  }, []);

  console.log(posts);
  return (
    <>
      <div className="mainmainsection">
        {
          posts.map((post) => {
            return (
              <div key={post._id} className="samplemain">
                <div className="samplecontainer">

                  <div key={post._id} className="r1">
                    <>
                      <img className='sectionimg' src={`http://localhost:5000/${post.image}`} alt="myimg" />
                      <Link to={post.title}></Link>
                      <h1 className="heading">{post.title}</h1>
                    </>
                  </div>
                </div>
              </div>
            )
          })

        }
      </div>
    </>
  )
}

export default Section

App.js（要呈现的主文件）

import React, { useState, useEffect,useRef } from 'react';

import Footer from './components/Footer';
import Header from './components/Header';
import Navbar from './components/Navbar';
import Missing from './components/MissingPage';
import api from './components/api/post';
import Section from './components/Section';

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Sectioninner from './components/Sectioninner'
import Socialicons from './components/Socialicons';

function App() {
  const [posts, setPosts] = useState([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage, setPostsPerPage] = useState(5);
  const [searchResults, setSearchResults] = useState([]);
  const componentMounted = useRef(true);

  useEffect(async() => {
      try {
        setLoading(true);
        const response = await api.get ('http://localhost:5000/posts');
        if (componentMounted.current) {
          setPosts(response.data);
          setLoading(false);
          return () => {
            componentMounted.current = false;
          }
        }
       
      } catch (err) {
        if (err.response) {
          // Not in the 200 response range 
          console.log(err.response.data);
          console.log(err.response.status);
          console.log(err.response.headers);
        } else {
          console.log(`Error: ${err.message}`);
        }
      }
      return () => {
        componentMounted.current = false;
      }
  }, [])

  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  return (
       <Router>
          <Navbar />
          <Header search={search} setSearchResults={setSearch} />
        <Socialicons />
        <Footer />
        <Section />
        <Routes>
      <Route exact path="/" posts={posts} element={<Sectioninner />} />
        </Routes>
      </Router>
  );
}

export default App;

控制台中出现错误（它说错误在链接组件中）