在 React Router v6 中将动态段限制为某些值？

Question

我们正在实现的 URL 结构具有类似于mysite.com/en/some-page页面en要翻译成的语言的 URL。我的代码的一个简化示例是：

<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（坏）的主页。后者应该被视为*错误。

以前版本的 React Router 对动态段有一定程度的正则表达式支持，但 v6 似乎没有。有没有一种方法可以限制:locale仅已知的好字符串并让正常*匹配捕获其他任何内容？

我希望答案不是“硬编码所有区域设置”......

Answer 1

一般来说，答案是通过布局路由对区域设置进行硬编码，但如果您只想渲染单个布局路由，您可以读取并测试locale布局组件中的路由路径参数，并在参数值无效时重定向该路由。

英语|法语语言环境的测试示例：

console.log(/en|fr/gi.test("de"));
console.log(/en|fr/gi.test("en"));
console.log(/en|fr/gi.test("fr"));

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

const LocaleLayout = () => {
  const { locale } = useParams();
  const isValidLocale = /en|fr/gi.test(locale);
  return isValidLocale
    ? <Outlet />
    : <Navigate to="/" replace />;
};

...

<Router>
  <Routes>
    <Route path="/" element={<RedirectToLocale />} />
    <Route path="/:locale" element={<LocaleLayout />}>
      <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>