title: React route to be render INSIDE another component
body: <p>I have this components structure:</p>
  
  <p><a href="https://i.stack.imgur.com/Tlpgd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tlpgd.png" alt="enter image description here"></a></p>
  
  <p>I need based on 2 different routes to load inside &lt; OtherComponent> the corresponding route from Router.</p>
  
  <p>I using: <code>"react-router-dom": "^5.1.2"</code>
  , and saw some posts talking about using IndexRoute and props.children, but IndexRoute cann't be resolved from react-router-dom, seems it was removed in version 5.</p>
  
  <p>My Router (BrowserRouter) looks like this:</p>
  
  <pre><code>&lt;Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyApp'}&gt;
                  &lt;Switch&gt;
                      &lt;Route path="/" exact component={HomePage} /&gt;
                      {/*&lt;IndexRoute component={ProjectsList} /&gt; // The component to send to HomePage's `props.children` when route is '/'*/}
                      &lt;Route path="/login" component={Login} /&gt;
                      &lt;Route path="/editProject" component={ProjectEditor} /&gt;
                      {/*&lt;Redirect path="*" to="/" /&gt;*/}
                  &lt;/Switch&gt;
              &lt;/Router&gt;
  </code></pre>
  
  <p>At the beginning &lt; ProjectsList> is loaded inside &lt; HomePage> (hardcoded), </p>
  
  <p>but from ProjectsList there is a need to edit a project, so need to load the &lt; ProjectEditor> this time inside &lt; HomePage> </p>
  
  <h1>Update</h1>
  
  <p>A more detailed structure:</p>
  
  <p><a href="https://i.stack.imgur.com/r3Adw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r3Adw.png" alt="enter image description here"></a></p>