React Router v6如何配置实现所有路由常驻显示Nav组件

• React Router v6的Routes组件和v5的Switch逻辑类似，同层级路由只会匹配第一个符合条件的路由项。你当前的写法里，访问根路径/时会命中第一个<Route path='/' element={<Home />} />，直接渲染Home组件，不会执行后续path="*"的路由逻辑，所以根路径下Nav组件完全不会显示。
• 你用到了嵌套路由写法，但没有配套使用Outlet组件承载子路由内容，即使path="*"路由命中，也无法正常渲染嵌套的Nav组件。

有两种常用实现方式，你可以根据后续业务扩展需求选择：

方案1：直接提取常驻组件（最简实现） #

因为Nav需要在所有页面常驻，直接把Nav放在Routes组件外部即可，不需要写在路由规则里：

function App () {
  return (
    <>
      <div className='title'>
        <h1>My App</h1>
      </div>
      <div className='main'>
        {/* Nav在所有路由下都会常驻显示 */}
        <Nav />
        <Routes>
          {/* 仅根路径精确匹配时显示Home组件 */}
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </>
  )
}

方案2：嵌套路由布局实现（扩展性更强） #

如果后续还有其他公共布局内容需要复用，推荐用嵌套路由的布局方案：

1. 先创建公共布局组件，内置Outlet用于承载子路由内容

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

function CommonLayout() {
  return (
    <div>
      <Nav />
      {/* 子路由内容将渲染到Outlet位置 */}
      <Outlet />
    </div>
  )
}

2. 修改App组件的路由配置

function App () {
  return (
    <>
      <div className='title'>
        <h1>My App</h1>
      </div>
      <div className='main'>
        <Routes>
          <Route path="/" element={<CommonLayout />}>
            {/* 根路径匹配时，Outlet位置渲染Home */}
            <Route index element={<Home />} />
            {/* 其他路径匹配时，Outlet位置无内容，仅显示Nav */}
            <Route path="*" element={null} />
          </Route>
        </Routes>
      </div>
    </>
  )
}

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