title: Nested routing in react-router-dom V6
body: <p>I hope All you are doing well. Recently I have done the project with react and make a sample <a href="https://codesandbox.io/s/blissful-bash-8zh7g?file=/src/Main.js" rel="noreferrer">here</a>. The problem is in routing. I want to display the child route under its parent but unfortunately I did not make it. I would be truly appreciated it, If anyone can explain the issue or fix the code.</p>
  <p>App</p>
  <pre><code>import &quot;./styles.css&quot;;
  import { BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;;
  import Login from &quot;./Login&quot;;
  import Main from &quot;./Main&quot;;
  
  export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Router&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; element={&lt;Login /&gt;} /&gt;
            &lt;Route path=&quot;/main&quot; element={&lt;Main /&gt;}&gt;&lt;/Route&gt;
          &lt;/Routes&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Main</p>
  <pre><code>import React from &quot;react&quot;;
  import {
    BrowserRouter as Router,
    Routes,
    Route,
    Outlet,
    Link
  } from &quot;react-router-dom&quot;;
  import Child1 from &quot;./Child1&quot;;
  import Child2 from &quot;./Child2&quot;;
  
  export default function Main() {
    return (
      &lt;div&gt;
        &lt;h1&gt;main page&lt;/h1&gt;
        &lt;Link to=&quot;/main/child1&quot;&gt;child 1&lt;/Link&gt;||||
        &lt;Link to=&quot;/main/child2&quot;&gt;child 2&lt;/Link&gt; ||||
        &lt;Link to=&quot;/&quot;&gt;log out&lt;/Link&gt;
        &lt;Outlet /&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/main/child1&quot; element={&lt;Child1 /&gt;} /&gt;
          &lt;Route path=&quot;/main/child1&quot; element={&lt;Child2 /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>child 1 &amp; 2</p>
  <pre><code>export default function Child1() {
    return &lt;div&gt;Child1&lt;/div&gt;;
  }
  </code></pre>
  <pre><code>export default function Child2() {
    return &lt;div&gt;Child2&lt;/div&gt;;
  }
  </code></pre>
  <p>Bests.</p>