检查 URL 参数是否在允许的参数列表中并相应地进行路由

Question

在我的 app.js 中，我有一个路线列表：-

  <Switch>
    <Route path='/:locale'>
      <Header />
      <Container />
      <Footer />
    </Route>
    <Route path='/notfound' component={NotFound} />
    <Redirect to='/notfound' />
  </Switch>

我有一个像 www.mydomainname.com/us. 这样的 URL 我希望第一个路由仅在 :locale 匹配 us 或 uk 时渲染组件。如果 :locale 为空或不等于 us 或 uk（如 au），则页面应路由到 /notfound.

我目前面临的问题是，如果我在www.mydomainname.com/之后输入www.mydomainname.com/notfound或任何随机内容，那么第一条路线正在执行。我知道我可以使用 useParams() 获取 :locale，但是如何根据允许值数组检查它并在检查失败时重新路由到 /notfound 页面？

Answer 1

路由“/:locale”是一个包罗万象的路由，因此它将匹配任何“/randomstring”。引入一个组件 Body，它是特定于语言环境的渲染器。

<Switch>
<Route path='/notfound' component={NotFound} />
<Route path='/:locale'>
  <Body>
    <Header />
    <Container />
    <Footer />
  <Body>
</Route>
<Redirect from='/' to='/notfound' exact />
</Switch>

Body 组件将处理重定向

const Body = (props) => {
  const { locale } = useParams()
  if (["us", "uk"].indexOf(locale) != -1)
    return(props.children)
  else
    return(
      <Redirect to="/notfound" />
    )
}

Answer 2

react-router-dom@5 Route 组件的 path 属性在后台使用 path-to-regexp，因此您可以使用它来更精确地匹配路径。 path="/:locale(us|uk)" 将仅匹配 "/us" 和 "/uk" 路径。

示例：

<Switch>
  <Route path="/:locale(us|uk)">
    <Header />
    <Container />
    <Footer />
  </Route>
  <Route path="/notfound" component={NotFound} />
  <Redirect to="/notfound" />
</Switch>

检查 URL 参数是否在允许的参数列表中并相应地进行路由

Check if URL param is in list of allowed params and route accordingly

javascript

reactjs

react-router