当访问正确的 url 并且用户未登录时，如何安装我的 React 组件？

Question

My App.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>
        }

My app shows a Nav bar at the top. It has a button that says Logout . When the button is clicked, I am clearing the authedUser behind the scenes in my Redux store and navigate to the '/sign-in' url. All of this works, but when the '/sign-in' url is accessed, my SignIn component doesn't get rendered. But when I reload, the SignIn component does get rendered.

After the user is being logged out, App.js get re-rendered. Then the ternary operator should actually be false (because this.props.authedUser is null) and it should render the route and its component SignIn . But this doesn't seem to happen. How can I make sure, that the SignIn component does get rendered, when the ternary operator returns false?

Answer 1

When authedUser is false app.js is re-render with out

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

so... when you navigate the user to /sign-in the route those not exists

In order to achive your goal, you can do this:

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>

After a succesfull login, you will do history.push('/main'), and in Main.js all the authenticated routes will be managed

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

and when you will want to navigate a user to some route:

history.push('/main/leaderboard')