当其他路由在反应路由器中处于活动状态时如何禁用特定路由

Question

我有运动和娱乐两个部分。我希望当我的运动路线处于活动状态时，用户不应访问娱乐路线。我该怎么做？？

我的 App.js 文件中的路由代码

<Router>
  <Switch>
    <Route path="/" exact>
      <Redirect to="/home" />
    </Route>
    <Route path="/home" component={Main} />
    <Route path="/sports" component={Sports} />
    <Route path="/entertainment" component={Entertainment} />
   
  </Switch>
</Router>

Answer 1

你可以分成两部分。

举例：

const Routers = () => {
  const toggleRoutesPermission = true // should get the permission value from somewhere

  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <Redirect to="/home" />
        </Route>
        <Route path="/home" component={Main} />
        {
          toggleRoutesPermission
            ? <Route path="/sports" component={Sports} />
            : <Route path="/entertainment" component={Entertainment} />
        }
      </Switch>
    </Router>
  )
}