React Router redirect rendering a blank screen

Question

Currently having a small issue with ReactJS and the routing. I currently want my app to redirect back to the login screen if a token does not exist. The app should zero access to the other pages. If a user tries to input a url to redirect it without a valid token, it should default back to the login page.

My code is as follows at present.

import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
        ...

  render() {
    const token = localStorage.getItem('access_token');

    return (
      <BrowserRouter>
        {!token ? <Route render={() => <Redirect push to="/" />} /> :
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/validate" component={ValidateLoginContainer} />
          <Route exact path="/home" component={Landing} />
          <Route exact path="/non-arrivals" component={NonArrivals} />
          <Route exact path="/due-in-summary" component={DueInSummary} />
          <Route exact path="/due-in-forecast" component={DueInForecastDetail} />
          <Route exact path="/hourly-arrivals-departures" component={HourlyArrivalsDepartures} />
          <Route exact path="/overstays" component={Overstays} />
        </Switch>
      }
      </BrowserRouter>
    );
  }

Trouble is it redirects fine, but renders a blank screen.

Update code, still same error:

  <BrowserRouter>
    <Switch>
      <Route render={() => {
            if (!token) {
              return <Redirect push to="/" />;
            }
               return <Redirect push to="/home" />;
           }}
      />

      <Redirect exact from="/" to="/home" />
      <Route exact path="/" component={Login} />
      <Route exact path="/validate" component={ValidateLoginContainer} />
      <Route exact path="/home" component={Landing} />
      <Route exact path="/non-arrivals" component={NonArrivals} />
      <Route exact path="/due-in-summary" component={DueInSummary} />
      <Route exact path="/due-in-forecast" component={DueInForecastDetail} />
      <Route exact path="/hourly-arrivals-departures" component={HourlyArrivalsDepartures} />
      <Route exact path="/overstays" component={Overstays} />
    </Switch>
  </BrowserRouter>

Solution

Well you are now inside a infinite loop as when users tries to navigate without a token you are redirecting to / but with your ternary rendering you are rendering only

<Route render={() => <Redirect push to="/" />} /> so the component for Login is not defined, you would need to either change ternary operator to also render Login always (basically now you are returning only redirect always when you don't have a token, that's why you have blank page, you need to add also route for login in ternary switch, it should be inside the true branch not false branch), or change implementation like:

authenticatedPage.js

export function authenticatedPage (Component) {
  const componentName = Component.displayName || Component.name || 'Component'

  return class extends React.Component {
    static displayName = `Route(${componentName})`

    renderPage () {
      return (
        <Component {...this.props} />
      )
    }

    render () {
      const token = localStorage.getItem('access_token');
      if (token) {
        return this.renderPage()
      } else {
        return <Redirect to='/login' />
      }
    }
  }
}

index.js

import { authenticatedPage } from './authenticatedPage.js'

      <BrowserRouter>
                <Switch>
                  {/* Authentication Routes */}
                  <Redirect exact from='/' to='/home' />
                  <Route exact path='/login' component={Login} />

                  {/* Authenticated Routes */}
                  <Route exact path='/home' component={authenticatedPage(Landing)} />/> */}
                </Switch>
     </BrowserRouter>

Comments

[Milos Mosovsky]

any console errors?

[Raziel]

@MilosMosovsky nope, just a warning: You tried to redirect to the same route you're currently on: "/"

[Raziel]

this triggers A <Router> may have only one child element

[Raziel]

Milos, see updated code, still triggering same issue with a blank screen :(

[Milos Mosovsky]

@MubeenHussain I've updated the answer to a implementation how it should look like, and how it should be done in a proper way, HoC wrapping, I tested it locally