如何使用React Router v6在父组件内切换嵌套子组件

问题原因 #

React Router v6 调整了路由匹配逻辑，默认所有路由执行精确匹配：父路由如果没有添加通配符*，不会继续向下匹配子组件内部定义的嵌套路径，因此AuthPage内的路由规则无法被触发。

解决方案 #

方案1：组件内定义子路由（兼容现有写法） #

1. 修改RootPage的路由配置，给父路由路径添加/*通配符，允许匹配后续子路径：

<div className='root-page'>
    <Routes>
        <Route path='/*' element = { <Auth /> } />
        {/* 后续要加Dashboard等模块直接新增路由即可 */}
        {/* <Route path='/dashboard/*' element={<Dashboard />} /> */}
    </Routes>
</div>

2. 修改AuthPage内的路由为相对路径（去掉开头的/），符合嵌套路由规范，避免后续调整父路由路径时出现适配问题：

import { Navigate } from 'react-router-dom'
// ...其他代码
<div className="auth">
    <div className="auth-left">
        <Routes>
            <Route path='signin' element = { <SignIn /> } />
            <Route path='signup' element = { <SignUp /> } />
            <Route path='recovery' element = { <PasswordRecovery /> } />
            {/* 可选：根路径默认重定向到登录页 */}
            <Route path='' element={<Navigate replace to='signin' />} />
        </Routes>
    </div>
    <div className="auth-right">
        <img src="./assets/image.png" alt="" />
    </div>
</div>

方案2：集中式路由定义（React Router v6 官方推荐写法） #

所有路由统一在Root层定义，结构更清晰，维护成本更低：

1. RootPage层整合嵌套路由：

import { Navigate } from 'react-router-dom'
// ...其他代码
<div className='root-page'>
    <Routes>
        <Route path='/' element={<Auth />}>
            <Route path='signin' element = { <SignIn /> } />
            <Route path='signup' element = { <SignUp /> } />
            <Route path='recovery' element = { <PasswordRecovery /> } />
            {/* index表示父路由默认匹配的子路由 */}
            <Route index element={<Navigate replace to='signin' />} />
        </Route>
        {/* Dashboard模块嵌套路由示例 */}
        <Route path='/dashboard' element={<Dashboard />}>
            <Route path='user-list' element={<UserList />} />
        </Route>
    </Routes>
</div>

2. AuthPage内把原来的Routes代码块替换为<Outlet />组件，作为子组件的渲染占位即可：

import { Outlet } from 'react-router-dom'
// ...其他代码
<div className="auth">
    <div className="auth-left">
        {/* 嵌套子组件会渲染在Outlet位置 */}
        <Outlet />
    </div>
    <div className="auth-right">
        <img src="./assets/image.png" alt="" />
    </div>
</div>

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