Изменить <Route>компонент для "/" при входе в систему (Реагировать)

Question

Маршрутизация для этого веб-приложения, которое я создаю, будет отображать компонент 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>

Rightтеперь я регистрирую / регистрирую пользователей и сохраняю идентификатор пользователя как переменную сеанса в экспрессе.Поэтому, пока эта переменная присутствует, я должен быть в состоянии проверить, является ли пользователь "loggedIn".

Может ли это быть сделано условно в коммутаторе, как ..

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

или естьчто лучше для обработки таких экземпляров Routing?

Answer 1

Если вам нравится конструкция "if" - "else", вы можете использовать ее:

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

Но лучше использовать троичную.

Answer 2

Да, вы можете использовать условное выражение в вашем 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