CODEWITHSUNDEEP
reactjsreact-router-v4
resting
resting

Reputation: 17467

React router redirect to root blank page

I can see Login component in /.
I can see Home component in /home (when logged in).

But when I access /home without logging in, I get redirected to /, but it's showing a blank page.

Why is it not showing me the Login component?

Here's the ProtectedRoute component I use:

const ProtectedRoute = ({component: Component, isAuth, ...rest}) => {
  if (Cookies.get('token')) {
    isAuth = true
  }
  return <Route {...rest} render={props => (isAuth ? <Component {...props} /> : <Redirect exact to="/" />)} />
}

Here's my route in App.js:

render() {
  return (
    <div className={styles.App}>
      <Switch>
        <Route exact path="/" component={Login} />
        <ProtectedRoute path="/home" component={Home} isAuth={this.props.auth} />
        <Route render={() => <h1>Not found</h1>} />
      </Switch>
    </div>
  )
}

Here's BrowserRouter as Router in index.js:

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,

  document.getElementById('root'),
)

Upvotes: 1

Views: 2295

Answers (1)

resting
resting

Reputation: 17467

Realised the Switch case isn't updating even though the route did change when redirected using react developer tools.

Finally got it working after I moved BrowserRouter(as Router) to wrap only the Switch cases.

render() {
  return (
    <div className={styles.App}>
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <ProtectedRoute path="/home" component={Home} />
          <Route render={() => <h1>Not found</h1>} />
        </Switch>
      </Router>
    </div>
  )
}

Upvotes: 3

Related Questions