如何用react-router v6的createBrowserRouter适配多语言路由并解决匹配报错？

AI 小北

2026-7-5

解决方案

1. 修复路由匹配问题

你遇到的No routes matched location "/en/dashboard"错误，是因为子路由使用了绝对路径（开头带/），导致父路由的path被忽略，路由结构无法正确关联。调整路由层级，将语言参数:lang作为父路由的一部分，子路由使用相对路径即可解决：

import { createBrowserRouter, Navigate } from 'react-router-dom';

export const router = createBrowserRouter([
  // 处理无语言标识的URL，自动重定向到英文路径
  {
    path: '/',
    element: <Navigate to="/en/dashboard" replace />,
  },
  // 带语言参数的父路由
  {
    path: '/:lang(en|es)',
    element: <AuthLayout />,
    errorElement: <ErrorPage />,
    children: [
      // 相对路径，对应 /:lang/dashboard
      {
        path: 'dashboard',
        element: <Dashboard />,
      },
      // 分类相关路由
      {
        path: 'classifications',
        children: [
          { index: true, element: <Classifications /> },
          // 相对路径，对应 /:lang/classifications/:id
          { path: ':id', element: <UpdateClassifications /> },
        ],
      },
      // 访问 /en 或 /es 时，自动跳转到对应语言的dashboard
      {
        index: true,
        element: <Navigate to="dashboard" replace />,
      },
    ],
  },
]);

2. 关键调整说明

路由层级优化：将/:lang(en|es)作为父路由，子路由使用相对路径，自动继承父路由的语言参数，形成合法的路由路径（如/en/dashboard、/es/classifications/123）。
自动重定向逻辑：
- 根路径/直接重定向到/en/dashboard，满足无语言标识时默认跳转英文路径的需求。
- 父路由的index子路由处理单独访问/en或/es的场景，自动跳转到对应语言的dashboard页面。
replace属性：使用replace避免在浏览器历史记录中留下重定向的冗余条目，优化用户导航体验。