title: React Router Error - Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pathname')
body: <p>It says undefined <code>pathname</code> but I don't know what's going wrong with my code. It says when I am  fetching data from backend to frontend then suddenly these error(s) occurred and before it can't perform react state update unmounted component no-ops. I have managed that error but these errors as typerror which says undefined 'pathname'.</p>
  <p>section.js <em>when I uncomment from app.js then error appears</em></p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import './Section.css'
  import {Link} from &quot;react-router-dom&quot;;
  // import api from './api/post';
  
  function Section() {
    const [posts, setPosts] = useState([]);
  
    const FetchPosts = async () =&gt; {
      const response = await fetch('http://localhost:5000/posts');
      setPosts(await response.json([]));
    }
    console.log(posts)
    useEffect(() =&gt; {
      FetchPosts();
    }, []);
  
    console.log(posts);
    return (
      &lt;&gt;
        &lt;div className=&quot;mainmainsection&quot;&gt;
          {
            posts.map((post) =&gt; {
              return (
                &lt;div key={post._id} className=&quot;samplemain&quot;&gt;
                  &lt;div className=&quot;samplecontainer&quot;&gt;
  
                    &lt;div key={post._id} className=&quot;r1&quot;&gt;
                      &lt;&gt;
                        &lt;img className='sectionimg' src={`http://localhost:5000/${post.image}`} alt=&quot;myimg&quot; /&gt;
                        &lt;Link to={post.title}&gt;&lt;/Link&gt;
                        &lt;h1 className=&quot;heading&quot;&gt;{post.title}&lt;/h1&gt;
                      &lt;/&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              )
            })
  
          }
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  
  export default Section
  </code></pre>
  <p>App.js (main file to render)</p>
  <pre><code>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 &quot;react-router-dom&quot;;
  
  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() =&gt; {
        try {
          setLoading(true);
          const response = await api.get ('http://localhost:5000/posts');
          if (componentMounted.current) {
            setPosts(response.data);
            setLoading(false);
            return () =&gt; {
              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 () =&gt; {
          componentMounted.current = false;
        }
    }, [])
  
    const indexOfLastPost = currentPage * postsPerPage;
    const indexOfFirstPost = indexOfLastPost - postsPerPage;
    const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
  
    return (
         &lt;Router&gt;
            &lt;Navbar /&gt;
            &lt;Header search={search} setSearchResults={setSearch} /&gt;
          &lt;Socialicons /&gt;
          &lt;Footer /&gt;
          &lt;Section /&gt;
          &lt;Routes&gt;
        &lt;Route exact path=&quot;/&quot; posts={posts} element={&lt;Sectioninner /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3bpWk.png" rel="nofollow noreferrer">in console with error   (it say's error is in link compontnent)</a></p>