React路由器未解析参数路由

Question

我正在使用react-router-domV6

<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 "使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>

如果你不想渲染"；实例"；组件，然后在其自己的索引路由上单独渲染它。

示例：

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

有关更多详细信息，请参阅：

• 路线和路线
• 布置路线
• 出口