title: React-router v5 updates the URL but doesn't render nested component
body: <p>I created an application using <code>react</code>, <code>react-router</code>, <code>react-redux</code>, <code>connected-react-router</code> and I have the following structure:</p>
  
  <pre><code>- app
    - admin
      - category
        - categoryList
        - categoryAdd
  </code></pre>
  
  <p>My idea is to execute the following app flow:</p>
  
  <pre><code>/admin -&gt; /admin/category -&gt; /admin/category/add
  </code></pre>
  
  <p>but for some reason I can't see the last component(<code>CategoryAdd</code>) rendered.</p>
  
  <p>Code(sandbox link in the end):</p>
  
  <h3>index.js</h3>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Provider } from "react-redux";
  import { Route, Switch, Link } from "react-router-dom"; 
  import { ConnectedRouter } from "connected-react-router";
  import configureStore, { history } from "./configureStore";
  
  import AdminPage from "./AdminPage";
  import Category from "./Category";
  
  const store = configureStore(/* provide initial state if any */);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;&gt;
          &lt;Link to="/admin/category"&gt;Category&lt;/Link&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/admin" component={AdminPage} /&gt;
            &lt;Route exact path="/admin/category" component={Category} /&gt;
          &lt;/Switch&gt;
        &lt;/&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;,
    document.getElementById("root")
  );
  
  </code></pre>
  
  <h3>AdminPage.js</h3>
  
  <pre><code>import React from "react";
  import { Link } from "react-router-dom";
  
  export default function AdminPage() {
    return (
      &lt;div style={{ border: "1px solid black", margin: 20 }}&gt;
        &lt;div&gt;AdminPage&lt;/div&gt;
        &lt;Link to="/admin/category"&gt;Catgory page link&lt;/Link&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  
  <h3>Category.js</h3>
  
  <pre><code>import React from "react";
  import { Route, Switch } from "react-router-dom";
  import { withRouter } from "react-router-dom";
  import CategoryList from "./CategoryList";
  import CategoryAdd from "./CategoryAdd";
  
  function Category() {
    return (
      &lt;Switch&gt;
        &lt;Route path={`/admin/category`} render={() =&gt; &lt;CategoryList /&gt;} /&gt;
        &lt;Route path={`/admin/category/add`} render={() =&gt; &lt;CategoryAdd /&gt;} /&gt;
      &lt;/Switch&gt;
    );
  }
  
  export default withRouter(Category);
  
  </code></pre>
  
  <h3>CategoryList.js</h3>
  
  <pre><code>import React from "react";
  import { Link } from "react-router-dom";
  
  export default function CategoryList() {
    return (
      &lt;div style={{ border: "1px solid black", margin: 20 }}&gt;
        CategoryTable &lt;Link to="/admin/category/add"&gt;Add&lt;/Link&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <h3>CategoryAdd.js</h3>
  
  <pre><code>export default function Add() {
    return &lt;div style={{ border: "1px solid black", margin: 20 }}&gt;Add Page&lt;/div&gt;;
  }
  </code></pre>
  
  <p>Here is the sandbox: <a href="https://codesandbox.io/embed/dark-star-3fhs0" rel="nofollow noreferrer">https://codesandbox.io/embed/dark-star-3fhs0</a></p>