title: Navigate from parent to child in react where each component defines its own routes
body: <p>In a React app with a parent and child elements, I want to achieve the following when navigating to <code>/Parent/Child</code>:</p>
  <ol>
  <li>I want <code>Child</code> to be rendered <em>on a new page</em>.</li>
  <li>I want to <em>avoid</em> defining a route for <code>/Parent/Child</code> in <code>index.js</code> (the topmost file).</li>
  </ol>
  <p>Currently, in the following code (<a href="https://codesandbox.io/s/stupefied-sea-yhtnj" rel="nofollow noreferrer">see it live</a>), when navigating to <code>/Parent/Child</code>, both parent and child are rendered, thus breaking requirement #1. The reason is that <code>&lt;Route path='/Parent' component={Parent} /&gt;</code> doesn't have the <code>exact</code> attribute.</p>
  <p>However, making it <code>&lt;Route exact path='/Parent' component={Parent} /&gt;</code> won't work as well, since <code>Child</code> won't be rendered at all (<a href="https://codesandbox.io/s/vibrant-lake-pt2m1" rel="nofollow noreferrer">see it live</a>), which I understand why.</p>
  <p>An optional solution is to add <code>/Parent/Child</code> route in <code>index.js</code> (and also get rid of the <code>Route</code> in <code>Parent</code>, <a href="https://codesandbox.io/s/objective-ishizaka-7nkjj" rel="nofollow noreferrer">see it live</a>), but it breaks requirement #2.</p>
  <p>So, is it possible to achieve both requirements? if so, how?</p>
  <ul>
  <li>React version is 17, react-router-dom version is 5.</li>
  </ul>
  <p><strong>index.js</strong></p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Parent from './Parent';
  import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route path='/Parent' component={Parent} /&gt;
        &lt;/Switch&gt;
        &lt;Redirect from='/' to=&quot;/Parent&quot; /&gt;
      &lt;/Router&gt;
    &lt;/React.StrictMode &gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p><strong>Parent.js</strong></p>
  <pre><code>import Child from './Child';
  import { Route, useRouteMatch, useHistory } from 'react-router-dom'
  
  function Parent() {
    const history = useHistory();
    const match = useRouteMatch();
    return (
      &lt;div&gt;
        &lt;Route path={`${match.path}/Child`} component={Child} /&gt;
        &lt;h1&gt;Parent&lt;/h1&gt;
        &lt;a target=&quot;_blank&quot; onClick={() =&gt; history.push(`${match.path}/Child`)}&gt;Navigate To Child&lt;/a&gt;
      &lt;/div&gt;
    );
  }
  
  export default Parent;
  </code></pre>
  <p><strong>Child.js</strong></p>
  <pre><code>import BackButton from './BackButton';
  
  function Child() {
    return (
      &lt;div&gt;
        &lt;h1&gt;Child&lt;/h1&gt;
        &lt;BackButton&gt;Go Back&lt;/BackButton&gt;
      &lt;/div&gt;
    );
  }
  
  export default Child;
  </code></pre>
  <p><strong>BackButton.js</strong></p>
  <pre><code>import { useHistory } from 'react-router-dom'
  
  function BackButton({ children }) {
    let history = useHistory()
    return (
      &lt;button type=&quot;button&quot; onClick={() =&gt; history.goBack()}&gt;
        {children}
      &lt;/button&gt;
    )
  }
  export default BackButton;
  </code></pre>