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

根据您的代码，您可以通过两种途径进行“ /”登录和登录

   <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>

封锁反应路线

1 个答案: