title: Using React Router within child component
body: <p>I'm using React Router in my React app, and from the App Component, all my Routes work as expected. </p>
  
  <p>However, I'm trying to user React Router to render a component in a child of App Component. When the user navigates to "/admin" the Router successfully renders the Admin Component. Now, within the Admin Component I'd like to match the route "/admin/posts/new" to render the NewPost Component (a child of Admin).</p>
  
  <p>I'm importing all necessary files, and no errors are thrown, but the app doesn't render the NewPost Component when visiting "/admin/posts/new". I've dug around the webs and couldn't find anything relevant to this issue, but I'm new to React and I might not have the language to be searching for the correct things. Any help is appreciated! Below is Admin Component. Thanks!</p>
  
  <pre><code>import React from 'react';
  import './index.css';
  import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
  
  import NewLabelPost from './NewLabelPost'
  
  const logOut = () =&gt; {
    firebase.auth().signOut();
  }
  
  const Admin = () =&gt;
    &lt;Router&gt;
      &lt;div&gt;
        &lt;h3&gt;Musique Plastique Admin Portal&lt;/h3&gt;
        &lt;div className="actions"&gt;
          &lt;ul&gt;
            &lt;li className="blue" onClick={logOut}&gt;Log out&lt;/li&gt;
            &lt;li className="blue"&gt;&lt;Link to={`/admin/posts/new`}&gt;Add a new Label Post&lt;/Link&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;Switch&gt;
          &lt;Route exact path={`/admin/posts/new`} render={() =&gt; &lt;NewLabelPost /&gt;}/&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  export default Admin;
  </code></pre>