react-router v6：没有路径的路由

Question

在react-router v6的文档中（https://reactrouter.com/en/main/route/route）它说

省略路径使该路线成为“布局路线”。它参与 UI 嵌套，但不会在 URL 中添加任何段

那么为什么这不起作用？

const App = () =>
    <Routes>
        <Route path='/abc' element={<p>abc</p>} />
        <Route element={<MyComponent />}></Route>
    </Routes>

const MyComponent = () =>
    <Routes>
        <Route path='/def' element={<p>def</p>} />
    </Routes>

在此示例中，导航到

/def

会出现错误

No routes matched location "/def"

如果我将

path='*'

添加到引用 MyComponent 的路径中，那么它可以正常工作，但似乎文档告诉我不需要这样做（事实上，据我所知，文档没有提到

path='*'

可以看到）

Answer 1

在您的示例中，您通过省略 path 属性将 MyComponent 定义为布局路由，但您仍然需要为其指定一个路由来处理嵌套路由。如果您希望 MyComponent 处理嵌套路由 /def，则需要在 MyComponent 中指定该路由。以下是修改代码以使其正常工作的方法：

import { Routes, Route } from 'react-router-dom';

const App = () => (
  <Routes>
    <Route path='/abc' element={<p>abc</p>} />
    <Route element={<MyComponent />} />
  </Routes>
);

const MyComponent = () => (
  <Routes>
    <Route path='/def' element={<p>def</p>} />
  </Routes>
);

export default App;

在此修改后的代码中，MyComponent 仍然定义为没有路径的布局路由，但在 MyComponent 内，有一个处理 /def 路由的嵌套 Route 组件。现在导航到 /def 应显示

<p>def</p>

元素中定义的内容。