React Router is redirecting to Login page but not rendering Login component

Question

I am doing a very basic authentication workflow by using React Router v4 as follows:

const AuthenticatedRoute = ({ component: Component, ...rest }) => (  
  <Route {...rest} render={props => (
    sessionStorage.getItem('jwt') ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: "/login",
        state: { from: props.location }
      }} />
    )
  )}/>
)

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
          <AuthenticatedRoute exact path="/" component={App}  />
          <Route path="/login" component={LoginPage} />
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

The flow works perfectly and when there is no 'jwt' the application is redirected to /login. However, strangely enough it is not getting rendered (i.e. blank page) until I press refresh from the browser.

Not sure how to debug and/or what could possible be the issue as this is a similar approach to most examples found online.

Is the `LoginPage` component mounting? (Stick a breakpoint, or log message in the `componentDidMount()` method) — Daniel May, Sep 04 '17 at 12:14

score 2 · Accepted Answer · answered Sep 04 '17 at 12:32

2

I'm guessing you use react-redux and it's a common issue. (If not I will delete answer)

use {pure: false} in react-redux connect or use withRouter HOC.

React router 4 does not update view on link, but does on refresh

answered Sep 04 '17 at 12:32

Tomasz Mularczyk

27,156
17
99
146

1

Yes indeed that is the problem. Thanks! – James Sep 04 '17 at 12:38
1

But can we know which option did exactly help ya? – Edward Chopuryan Sep 04 '17 at 12:41

score 0 · Answer 2 · answered Aug 09 '19 at 13:13

I came here with same issue. My flow involved a modal popup in the product details page, clicking on OK button will do some task and take the user back to product listing page. Tried {pure: false}, and withConnect(connect.... Tried couple of other things as well. Nothing worked. Then the simplest thing worked. I opened the modal with this.setState({showConfirmationModal: true}); So in the successHandler, in the .then of the axios.get, I closed it with this.setState({showConfirmationModal: false}); and then used state property to render the <Redirect in render(). It worked !!. Hope this helps.

React Router is redirecting to Login page but not rendering Login component

2 Answers2