Example of a HOC to manage route permissions in React.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Routes from './routes';

ReactDOM.render(
  <React.Fragment>
    <Routes />
  </React.Fragment>
  , document.getElementById('root')
);

PrivateRoute.jsx

import React from 'react';
import { withRouter, Redirect } from 'react-router-dom';

const PrivateRoute = (WrappedComponent) => {
  class PrivateRoute extends React.Component {
    state = {
      isLogged: false,
    }

    _checkAuthentication() {
      const logged = null;

      if (logged) {
        this.setState({ isLogged: true }, () => {
          console.warn('user is logged!');
        });
      }
    }

    componentWillMount() {
      this._checkAuthentication();
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps.location !== this.props.location) {
        this._checkAuthentication();
      }
    }

    render() {
      const { isLogged } = this.state;

      if (!isLogged) {
        return (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: this.props.location }
            }}
          />
        );
      }

      return (
        <WrappedComponent {...this.props} />
      );
    }
  }

  return withRouter(PrivateRoute);
}

export default PrivateRoute;

routes.jsx

import React from 'react';
import { Router, Switch, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

import PrivateRoute from './private';

import Base from './containers/base';
import Login from './containers/login';
import App from './containers/app';
import NotFound from './containers/notfound';

const Routes = () => (
  <Router history={createBrowserHistory()}>
    <Switch>
      <Route exact path="/" component={Base} />
      <Route path="/login" component={Login} />
      <Route path="/app" component={PrivateRoute(App)} />
      <Route component={NotFound} />
    </Switch>
  </Router>
);

export default Routes;

Resources about router v4 and hooks, diff from v3

• remix-run/react-router#3854
• remix-run/react-router#1764
• remix-run/react-router#1039
• https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a
• https://reacttraining.com/react-router/web/example/auth-workflow