CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Robert L
Robert L

Reputation: 53

React router dom v6, good way for nesting?

Just wondering if this is the right way to type code for nested elements with react-router-dom if I want to display them on separate pages??

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 (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="tasks" element={<Tasks />} />
          <Route path="tasks/comments" element={<Comments />} />
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

Upvotes: 1

Views: 134

Answers (1)

Drew Reese
Drew Reese

Reputation: 202751

You're not really nesting anything with a flat list of routes:

<Routes>
  <Route path="/" element={<Main />} />
  <Route path="tasks" element={<Tasks />} />
  <Route path="tasks/comments" element={<Comments />} />
</Routes>

But there is nothing wrong/incorrect with doing this.

If you wanted to nest the routes you could do so as:

<Routes>
  <Route path="/" element={<Main />} />
  <Route path="tasks">
    <Route index element={<Tasks />} /> // <-- "/tasks"
    <Route path="comments" element={<Comments />} /> // <-- "/tasks/comments"
  </Route>
</Routes>

Upvotes: 1

Related Questions