Как я могу смонтировать мой компонент React, если используется правильный URL-адрес, а пользователь не вошел в систему? - PullRequest
Новая
       76

Как я могу смонтировать мой компонент React, если используется правильный URL-адрес, а пользователь не вошел в систему?

0 голосов
/ 14 июля 2020

Мое приложение. js: 

        <Nav info={this.props}/>
        {this.props.loading === true
          ? null
          : <div>
            {this.props.authedUser
              ? <Switch>
                  <Route path='/' exact component={Dashboard}/>
                  <Route path='/question/:id' exact component={QPage}/>
                  <Route path='/new' exact component={CreateQ}/>
                  <Route path='/leaderboard' exact component={Leaderboard}/>
                  <Route path='/sign-in' exact component={SignIn}/>
                  <Route component={Error}/> 
                </Switch>
              : <Route path='/sign-in' component={SignIn}/>
            }                  
            </div>
        }

В моем приложении вверху отображается панель навигации. На нем есть кнопка с надписью Выход . Когда нажимается кнопка, я очищаю authedUser за кулисами в моем магазине Redux и перехожу к URL-адресу «/ sign-in». Все это работает, но при обращении к URL-адресу '/ sign-in' мой компонент SignIn не отображается. Но когда я перезагружаю, компонент SignIn все же отображается.

После выхода пользователя из системы выполняется повторное отображение App. js. Тогда тернарный оператор должен быть ложным (потому что this.props.authedUser имеет значение null), и он должен отображать маршрут и его компонент SignIn . Но, похоже, этого не происходит. Как я могу убедиться, что компонент SignIn действительно отображается, когда тернарный оператор возвращает false?

1 Ответ

0 голосов
/ 14 июля 2020

Когда authedUser является ложным app. js повторно визуализируется без 

<Switch>
  <Route path='/' exact component={Dashboard}/>
  <Route path='/question/:id' exact component={QPage}/>
  <Route path='/new' exact component={CreateQ}/>
  <Route path='/leaderboard' exact component={Leaderboard}/>
  <Route path='/sign-in' exact component={SignIn}/>
  <Route component={Error}/> 
</Switch>

поэтому ... когда вы перемещаете пользователя по /sign-in маршруту, которого не существует

Для достижения своей цели вы можете сделать следующее: 

App.js

<Switch>
  <Route path='/' exact component={Dashboard}/>
  <Route path='/main' exact component={Main}/>
  <Route path='/sign-in' exact component={SignIn}/>
  <Route component={Error}/> 
</Switch>

После успешного входа в систему вы выполните команду history.pu sh ('/ main') и в Main. js все аутентифицированные маршруты будут управляться 

Main.js
... your code...
if (!this.props.authedUser) {
  return <Redirect to='/sign-in' />
};

return (
  <Switch>
    <Route path='/question/:id' exact component={QPage}/>
    <Route path='/new' exact component={CreateQ}/>
    <Route path='/leaderboard' exact component={Leaderboard}/>
  </Switch>
)

и когда вы захотите направить пользователя к какому-либо маршруту: 

history.push('/main/leaderboard')
...