React Router v6如何限制动态路由段为指定合法值？

我们实现的URL结构为mysite.com/en/some-page，其中en是页面的语言翻译标识。以下是简化后的代码示例：

<Router>
    <Routes>
        <Route path="/" element={<RedirectToLocale />} />
        <Route path="/:locale">
            <Route index element={<Home />} />
            <Route path="about" element={<About />} />
            <Route path="news" element={<News />} />
            <Route path="*" element={<NotFound />} />
        </Route>
        <Route path="*" element={<NotFound />} />
    </Routes>
</Router>

RedirectToLocale组件用于在用户访问根路径时，重定向到对应的语言路径。当前遇到的问题是：mysite.com/en可正常显示首页（符合预期），但mysite.com/asdf也会显示首页（不符合预期，该路径应被*路由捕获并展示NotFound页面）。React Router旧版本对动态路由段提供了一定的正则匹配支持，但v6似乎不再具备该功能。想知道是否有方法将:locale动态段限制为已知合法字符串，让非法值被默认的*路由匹配捕获，且无需硬编码所有语言标识。

方法一：父路由组件校验法 #

给:locale的父路由添加一个守卫组件，在组件内部校验当前locale的合法性，非法则跳转至404页面，合法则渲染子路由内容。

示例代码：

// 合法语言集合可从配置文件/接口动态获取，无需硬编码在路由中
const validLocales = new Set(['en', 'zh', 'fr']);

function LocaleGuard() {
  const { locale } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    if (!validLocales.has(locale)) {
      // 非法locale，跳转至全局404路由
      navigate('*', { replace: true });
    }
  }, [locale, navigate]);

  // 合法时渲染子路由内容
  return <Outlet />;
}

// 更新路由配置
<Router>
    <Routes>
        <Route path="/" element={<RedirectToLocale />} />
        <Route path="/:locale" element={<LocaleGuard />}>
            <Route index element={<Home />} />
            <Route path="about" element={<About />} />
            <Route path="news" element={<News />} />
            <Route path="*" element={<NotFound />} />
        </Route>
        <Route path="*" element={<NotFound />} />
    </Routes>
</Router>

这种方式逻辑集中，语言集合可动态维护，无需修改路由规则。

方法二：数据路由Loader校验法（React Router v6.4+适用） #

如果项目使用React Router v6.4及以上的数据路由（通过createBrowserRouter创建），可以给:locale路由添加Loader函数，在Loader中完成合法性校验，非法则抛出404错误，由错误边界组件处理。

示例代码：

const validLocales = new Set(['en', 'zh', 'fr']);

function localeLoader({ params }) {
  if (!validLocales.has(params.locale)) {
    throw new Response('', { status: 404, statusText: 'Not Found' });
  }
  // 合法时可返回语言相关数据（如翻译资源）供子组件使用
  return { locale: params.locale };
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <RedirectToLocale />,
  },
  {
    path: '/:locale',
    loader: localeLoader,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <Home /> },
      { path: 'about', element: <About /> },
      { path: 'news', element: <News /> },
      { path: '*', element: <NotFound /> },
    ],
  },
  {
    path: '*',
    element: <NotFound />,
  },
]);

// 根组件中使用RouterProvider
<RouterProvider router={router} />

该方式利用数据路由的错误处理机制，实现校验逻辑与路由规则的解耦，更贴合React Router v6的设计思路。

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