title: React-router-dom nesting doesn't work in children components
body: <p>For visualisation and clear picture, I will show the app's screen shot first.</p>
  <p><a href="https://i.stack.imgur.com/RWrkj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RWrkj.png" alt="enter image description here" /></a></p>
  <p>I'm using github api to fetch Repos and Users. Simple. Now this how App.tsx looks;</p>
  <pre><code>// App.tsx
  import React from &quot;react&quot;;
  import MainSearchPage from &quot;./Components/MainSearchPage&quot;;
  import Header from &quot;./Components/Header&quot;;
  import &quot;./Sass/main.scss&quot;;
  
  const App: React.FC = () =&gt; {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Header /&gt;
        &lt;MainSearchPage /&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  
  </code></pre>
  <p>This is the MainSearchPage component;</p>
  <pre><code>// MainSearchPage.tsx
  import React, { useContext } from &quot;react&quot;;
  import { GithubContext } from &quot;../Context/GithubContext&quot;;
  import searchPc from &quot;../Icons/search-pc.svg&quot;;
  import SearchResults from &quot;./SearchResults&quot;;
  
  const MainSearchPage: React.FC = () =&gt; {
    const { isSearched } = useContext(GithubContext);
    return (
      &lt;div&gt;
        {isSearched ? (
          &lt;SearchResults /&gt;
        ) : (
          &lt;div className=&quot;blank-search-page&quot;&gt;
            &lt;div className=&quot;blank-search-page__items&quot;&gt;
              &lt;img src={searchPc} alt=&quot;search-pc&quot; /&gt;
              &lt;p&gt;Search results will appear here&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default MainSearchPage;
  </code></pre>
  <p>When input changes, isSearch becomes true and SearchResults is rendering. This is the SearchResults, where the problem begins.</p>
  <pre><code>//SearchResults.tsx
  import React from &quot;react&quot;;
  import { Route, BrowserRouter as Router, Switch } from &quot;react-router-dom&quot;;
  import MainSearchResults from &quot;./MainSearchResults&quot;;
  import SideBarSearchResults from &quot;./SideBarSearchResults&quot;;
  import UsersPage from &quot;./UsersPage&quot;;
  
  const SearchResults = () =&gt; {
    return (
      &lt;div className=&quot;search-results&quot;&gt;
        &lt;Router&gt;
          &lt;SideBarSearchResults /&gt;
          &lt;Switch&gt;
            &lt;Route path=&quot;/&quot; component={MainSearchResults} /&gt;
            &lt;Route path=&quot;/search-users&quot; component={UsersPage} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  };
  
  export default SearchResults;
  
  </code></pre>
  <p>So MainSearchResults is basically repo results on the right. Sidebar is obvious I suppose. And UsersPage is the component that should be rendered when I click the Users on the left. But nothing happens when I click. Url changes and that's it. No errors in the console or anything. It was working before I put &quot;isSearched&quot; state. But I don't think it should matter.</p>
  <p>SideBar component;</p>
  <pre><code>//SideBarSearchResults.tsx
  import React, { useContext } from &quot;react&quot;;
  import repositoriesSVG from &quot;../Icons/repositories.svg&quot;;
  import usersSVG from &quot;../Icons/users.svg&quot;;
  import bookmarkblackSVG from &quot;../Icons/bookmarkblack.svg&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import { GithubContext } from &quot;../Context/GithubContext&quot;;
  const SideBarSearchResults: React.FC = () =&gt; {
    const { repoCount, userCount } = useContext(GithubContext);
    return (
      &lt;div className=&quot;side-bar-search-results&quot;&gt;
        &lt;Link to=&quot;/&quot;&gt;
          &lt;div className=&quot;side-bar-search-results__repositories&quot;&gt;
            &lt;img src={repositoriesSVG} alt=&quot;repo&quot; /&gt;
            &lt;p className=&quot;result-title&quot;&gt;Repositories&lt;/p&gt;
            &lt;p className=&quot;quantity&quot;&gt;{repoCount ?? 0}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/Link&gt;
        &lt;Link to=&quot;/search-users&quot;&gt;
          &lt;div className=&quot;side-bar-search-results__users&quot;&gt;
            &lt;img src={usersSVG} alt=&quot;users&quot; /&gt;
            &lt;p className=&quot;result-title&quot;&gt;Users&lt;/p&gt;
            &lt;p className=&quot;quantity&quot;&gt;{userCount ?? 0}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/Link&gt;
        &lt;div className=&quot;side-bar-search-results__bookmarked &quot;&gt;
          &lt;img src={bookmarkblackSVG} alt=&quot;bookmarked&quot; /&gt;
          &lt;Link to=&quot;/repo-details&quot;&gt;
            &lt;p className=&quot;result-title&quot;&gt;Bookmarked&lt;/p&gt;
          &lt;/Link&gt;
          &lt;p className=&quot;quantity&quot;&gt;15&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default SideBarSearchResults;
  
  </code></pre>