React Router v6无路径布局路由失效疑问：为何/def路径匹配失败？

首先明确官方文档里的布局路由（无path路由）的核心定位：它是用来作为父路由嵌套子路由，实现UI共享的，而非直接放在根Routes下作为独立路由使用。

你的代码问题根源在于：根Routes中的无path路由不会匹配任何URL路径——因为没有path属性，React Router不会将任何请求路由到这个组件上。所以访问/def时，根Routes里只有/abc能匹配，无path路由不参与匹配，自然触发"No routes matched location '/def'"报错。

当你给这个路由加上path='*'后，它变成了通配符兜底路由，会匹配所有未被前面路由匹配的路径。此时请求/def会进入MyComponent，内部的Routes就能匹配/def路径，所以可以正常访问。但这其实是兜底路由的用法，并非文档中所说的布局路由典型场景。

正确的布局路由用法示例 #

如果想用布局路由实现UI嵌套（比如共享导航栏、侧边栏），应该把无path路由作为父路由，嵌套子路由，并通过Outlet渲染子路由内容：

import { Outlet } from 'react-router-dom';

// 共享布局组件
const SharedLayout = () => (
  <div>
    <header>全局导航栏</header>
    {/* Outlet用于渲染子路由的element */}
    <Outlet />
  </div>
);

const App = () => (
  <Routes>
    {/* 无path的布局路由，作为父路由包裹子路由 */}
    <Route element={<SharedLayout />}>
      {/* 子路由直接使用根路径，共享父路由的UI */}
      <Route path='/abc' element={<p>abc</p>} />
      <Route path='/def' element={<p>def</p>} />
    </Route>
  </Routes>
);

这种场景下，访问/abc或/def都会渲染SharedLayout的UI，同时显示对应的子路由内容，这才是文档中所说的“参与UI嵌套，但不会向URL添加任何片段”的布局路由用法——父路由无path，子路由的路径直接作为URL路径，不需要额外添加父路由的path片段。

你的代码调整方案 #

如果只是想让/def路径正常访问，最简单的方式是直接把它放在根Routes里：

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

如果MyComponent是需要共享的布局，那应该按照上面的布局路由示例，用Outlet嵌套子路由，而非在MyComponent里再写一个Routes（除非是需要嵌套更深的路由层级）。

内容的提问来源于stack exchange，提问作者Andy