React router dom v6，嵌套的好方法？

Question

只是想知道如果我想在单独的页面上显示它们，这是否是使用 react-router-dom 为嵌套元素键入代码的正确方法？

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

Answer 1

你并没有真正用简单的路由列表嵌套任何东西：

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

但是这样做wrong/incorrect没有任何意义。

如果你想嵌套路由，你可以这样做：

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

React router dom v6，嵌套的好方法？

React router dom v6, good way for nesting?

reactjs

react-router

react-router-dom