javascript - React Router 无法解析参数路由

Question

我正在使用react-router-dom V6

<Router>
  <Routes>
    <Route path="/">
      <Route path="example" element={<h1>Example</h1>}>
        <Route path=":id" element={<p>cool</p>} />
      </Route>
    </Route>
  </Routes>
</Router>

"http://localhost:3000/example " 渲染示例到目前为止效果很好，但是 “https://localhost:3000/example/34” 不渲染任何内容。

问题是什么？

请说明原因以及如何解决此问题。

Answer 1

嵌套路由时，父路由需要渲染一个 Outlet 组件，以便嵌套路由将其 element 内容渲染到其中。当没有提供 element 属性时，Route 组件默认渲染一个 Outlet，所以这就是为什么 "/example" 路线有效。

示例:

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Outlet,
} from 'react-router-dom';

...

<Router>
  <Routes>
    <Route path="/">
      <Route
        path="example"
        element={(
          <>
            <h1>Example</h1>
            <Outlet />
          </>
        )}
      >
        <Route path=":id" element={<p>cool</p>} />
      </Route>
    </Route>
  </Routes>
</Router>

如果您不想将“Example”组件与其子组件同时渲染，请在其自己的索引路由上单独渲染它。

示例:

<Router>
  <Routes>
    <Route path="/">
      <Route path="example">
        <Route index element={<h1>Example</h1>} />
        <Route path=":id" element={<p>cool</p>} />
      </Route>
    </Route>
  </Routes>
</Router>

更多详情请参见:

• Routes and Route
• Layout Routes
• Outlet