React Router Dom v6中使用Navigate实现精确路由重定向

核心问题 #

你遇到的空白页问题本质是对v6路由匹配规则、嵌套路由写法不熟悉导致的，v6和v5的核心差异点：

• v6 默认所有路由都是精确匹配，不需要手动加exact属性，同层级下路径越具体优先级越高
• v6 不支持同层级声明多个相同path的路由，只会渲染第一个匹配项
• 嵌套路由推荐使用相对路径，重复写全路径容易触发匹配异常

正确实现代码 #

1. 根路由文件修改 #

把重定向逻辑放到/admin/*路由的index子路由下，index路由天然只在路径完全匹配父级路径（也就是/admin，不带任何后缀）时触发，完全等价于v5的exact重定向效果：

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Navbar from './core/components/Navbar';
import Admin from './pages/Admin';
import Catalog from './pages/Catalog';
import ProductDetails from './pages/Catalog/components/ProductDetails';
import Home from './pages/Home';

const RoutesPages = () => (
    <BrowserRouter>
        <Navbar />
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/products" element={<Catalog />} />
            <Route path="/products/:productId" element={<ProductDetails />} />
            <Route path="/admin/*" element={<Admin />}>
                {/* 仅当路径完全等于 /admin 时触发重定向 */}
                <Route index element={<Navigate to="products" replace />} />
            </Route>
        </Routes>
    </BrowserRouter>
);

export default RoutesPages;

2. Admin组件路由修改 #

嵌套路由不需要重复写父级全路径，直接写相对路径即可：

import { Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Products from "./components/Products";
import './styles.scss';

const Admin = () => (
    <div className="admin-container">
        <Navbar />
        <div className="admin-content">
            <Routes>
                {/* 相对路径，自动拼接父级 /admin 前缀，实际匹配 /admin/products */}
                <Route path="products" element={<Products />} />
                <Route path="categories" element={<h1>Categories</h1>} />
                <Route path="users" element={<h1>Users</h1>} />
            </Routes>
        </div>
    </div>
);

export default Admin;

3. Products组件路由修改 #

三级嵌套同样用相对路径，列表页用index路由实现精确匹配：

import { Route, Routes } from 'react-router-dom';
import Form from './Form';
import List from './List';

const Products = () => {
    return (
        <div>
            <Routes>
                {/* 仅当路径完全等于 /admin/products 时渲染列表 */}
                <Route index element={<List />} />
                <Route path="create" element={<Form />} />
                <Route path=":productId" element={<h1>Editar produto</h1>} />
            </Routes>
        </div>
    );
}

export default Products;

逻辑说明 #

• 带*的通配符路由/admin/*只会匹配/admin/后带额外路径片段的地址，配合index路由，就实现了「只有访问裸/admin时才跳转，访问/admin/products等子路径时正常渲染Admin组件」的效果
• 嵌套路由用相对路径是v6推荐写法，避免全路径重复书写导致的匹配错误
• 重定向时加replace属性，会替换当前历史栈记录，不会出现用户点返回按钮来回跳重定向页的问题

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