title: Where to place nested routes in react-router?
body: <p>so basically I am new to <code>React</code> and <code>react-router</code>. Still learning.</p>
  
  <p>Can someone explain me why this is working:</p>
  
  <pre><code>const App = () =&gt; (
    &lt;Fragment&gt;
  
      &lt;Route 
        exact
        path="/"
        render={(props) =&gt; &lt;Calendar {...props} /&gt;}
      /&gt;
      &lt;Route
        path="/:topics"
        render={(props) =&gt; &lt;Topics {...props} /&gt;}
      /&gt;
      &lt;Route
        path="/:topics/:id"
        render={(props) =&gt; &lt;Topic {...props} /&gt;}
      /&gt;
    &lt;/Fragment&gt;
  );
  
  ReactDOM.render(
    &lt;BrowserRouter&gt;
      &lt;App /&gt;
    &lt;/BrowserRouter&gt;, ROOT);
  </code></pre>
  
  <p>but if I remove nested routes from <code>App</code> component and place them in <code>Topics</code> and <code>Topic</code> components then routing doesn't work.</p>
  
  <pre><code>class Topics extends Component {
    render() {
      const {match} = this.props;
  
      return (
        &lt;div className="topics"&gt;
  
            &lt;Route
              path={`${match.path}/:topics`}
              render={(props) =&gt; &lt;Topics {...props} /&gt;}
            /&gt;
        &lt;/div&gt;
      )
    }
  };
  </code></pre>
  
  <p>Also which approach is better ? Having all <code>Route</code>'s in <code>App</code> component or maybe put nested <code>Route</code>'s in nested components ?</p>