title: React router dom v6, good way for nesting?
body: <p>Just wondering if this is the right way to type code for nested elements with <strong>react-router-dom</strong> if I want to display them on separate pages??</p>
  <pre><code>import { BrowserRouter, Routes, Route } from 'react-router-dom'
  import Main from './routes/main/Main'
  import Comments from './routes/TaskComments/Comments'
  import Tasks from './routes/Tasks/Tasks'
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;BrowserRouter&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; element={&lt;Main /&gt;} /&gt;
            &lt;Route path=&quot;tasks&quot; element={&lt;Tasks /&gt;} /&gt;
            &lt;Route path=&quot;tasks/comments&quot; element={&lt;Comments /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/BrowserRouter&gt;
      &lt;/div&gt;
    )
  }
  
  export default App
  </code></pre>