Question

我正在构建的此Web应用程序的路由将呈现Home或Index组件，具体取决于是否有用户登录。这是我的路由。

<Router>
    <Switch>
      // <Route path="/" exact={true} component={Home} /> When logged in
      <Route path="/" exact={true} component={Index} />
      <Route path="/account/login" component={Login} />
      <Route path="/account/signup" component={Signup} />
    </Switch>
</Router>

现在我正在记录/注册用户并将用户的ID保存为快递中的会话变量。因此，只要该变量存在，我就应该能够检查用户是否“登录”。

这可以在开关中有条件地完成，如..

<Router>
    <Switch>
      if(loggedIn) { 
        <Route path="/" exact={true} component={Home} /> 
      } else { 
        <Route path="/" exact={true} component={Index} /> 
      }
      <Route path="/account/login" component={Login} />
      <Route path="/account/signup" component={Signup} />
    </Switch>
</Router>

还是有更好的方法来处理像这样的路由实例吗？

Answer 1

是的，您可以在Switch中使用条件语句。我会选择在component道具中使用三元而不是两条不同的路线：

<Router>
    <Switch>
      <Route path="/" exact component={loggedIn ? Home : Index} />
      <Route path="/account/login" component={Login} />
      <Route path="/account/signup" component={Signup} />
    </Switch>
</Router>

此外，当道具的值为true时，您可以省略传递{true}，而React会将其默认为true。

exact={true} 
exact

Answer 2

如果您喜欢＆＃34;如果＆＃34; - ＆＃34;否则＆＃34;您可以使用它构建：

  {(() => {
    if (false) {
      return <Route path="/" exact component={Home} /> 
    }
    return <Route path="/" exact component={Index} />
  })()}

但使用三元组会更好。

登录时更改<route>组件为“/”（React）

2 个答案: