如何添加与 base 具有相同前缀的所有（*）路由？

Question

我正在构建一个多语言网站，但遇到 React Router 问题。

每个路径都以 /:lang 开头，并以相关页面的路径继续：

像这样：

"/:lang/profile"
"/:lang/stores"
"/:lang/products"
"/:lang"

我想在路径与可用页面的任何路径都不匹配时重定向到 404 页面。由于所有路径都以相同的东西开头，因此我需要使用 exact 属性。但是由于 exact 在匹配一个路由之前检查所有路由，所以最后带有 "*" 路径的路由总是匹配并且页面总是重定向到 404，即使使用现有路径也是如此。我也尝试了 "/:lang/*"，但没有发生任何不同。有解决办法吗？

Answer 1

你需要包装你的所有路径，Route component={NotFound} 如果没有找到将被渲染

<BrowserRouter>
    <Switch>
      <Route exact path="/lang" component={Lang}/>
      <Route exact path="/lang/profile" component={Profile}/>
      <Route component={NotFound}/>
    </Switch>
  </BrowserRouter>

旧方法是，使用 Redirect 然后将 url 映射到，这使用重定向功能，

<Switch>
    <Route path="/404" component={NotFound} />
    <Redirect to="/404" />
</Switch>

如果你使用 react-router v6，重定向被删除，但你仍然使用 * 导航，import {Navigate } from "react-router-dom";

import {Navigate } from "react-router-dom";
  <Routes>
    <Route path="/404" element={<div>Wrong 404 path/div>} />
    <Route path="*" element={<Navigate replace to="/404" />} />
  </Routes>

Answer 2

听起来您可能在没有使用 Switch 的情况下将路由渲染到路由器中。虽然 Router 将包括匹配并呈现所有匹配的路由（ 因此有时需要 exact 属性), Switch 独占匹配并渲染第一个匹配的路由。另请注意，在 Switch 中，路径顺序和特异性很重要！从 more 特定路径到 less 特定路径排序路由路径。

示例：

<Switch>
  <Route path="/:lang/profile" component={Profile} />
  <Route path="/:lang/stores" component={Stories} />
  <Route path="/:lang/products" component={Products} />
  <Route path="/:lang" component={Lang} />
  <Route component={NotFound} />
</Switch>

此处将首先尝试匹配更具体的路径，然后是不太具体的“/:lang”路径，如果不匹配，404 组件将呈现为任何内容的“包罗万象”之前在它上面不匹配。

如何添加与 base 具有相同前缀的所有（*）路由？

How to add ALL (*) route that has the same prefix as base?

reactjs

react-router

react-router-dom

multilingual