阻止react路由

Question

我使用了一个名为Core-UI的主题，代码中的路由略有不同。我对如何阻止app.js上最终通向所有路由的特定路由感到困惑。

我已经尝试了相关主题中的解决方案，但没有成功。

这是来自app.js的

<BrowserRouter>
      <React.Suspense fallback={loading()}>
        <Switch>
          <Route exact path="/" name="Login Page" render={props => <Login {...props} />} />
          <Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
          <Route exact path="/404" name="Page 404" render={props => <Page404 {...props} />} />
          <Route exact path="/500" name="Page 500" render={props => <Page500 {...props} />} />
          <Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />
        </Switch>
      </React.Suspense>

​

<Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />

这是我想使用localStorage拦截的路由。我试过了，但是失败了：

<Route path="/" name="Home" render={props => 
            localStorage.getItem('jwtToken') !== null
            ? (
              <DefaultLayout {...props} />
            ) : (
              <Redirect to={{ pathname: "/login" }} />
            )
          } 
/>

如果需要任何其他文件，我会提供它们。谢谢。

Answer 1

根据您的代码，您有两条通往"/“login和home的路由

   <Switch>
          <Route path="/" name="Home" render={props => 
            localStorage.getItem('jwtToken') !== null
            ? (
              <DefaultLayout {...props} />
            ) : (
              <Redirect to={{ pathname: "/login" }} />
            )
          } />

          <Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
          <Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
          <Route exact path="/404" name="Page 404" render={props => <Page404 {...props} />} />
          <Route exact path="/500" name="Page 500" render={props => <Page500 {...props} />} />
          <Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />
        </Switch>