private-route-example.jsx

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({component: Component, session, ...rest}) => {
  return (
    <Route
      {...rest}
      render={(props) => session ?
        <Component {...props} /> :
        <Redirect to={{pathname: '/signup'}} />}
    />
  )
};

const mapStateToProps = state => state.session;

export default connect(
  mapStateToProps,
)(PrivateRoute);


import React from 'react';
import { connect } from 'react-redux';
import { Switch, Redirect, Route } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';

import OnBoarding from './OnBoarding';
import Login from './Login';
import Settings from './Settings';
import Header from './Header';
import PrivateRoute from './PrivateRoute';

import { currentUser } from '@api/client/store/Selectors';
import { getUser } from '@block/actions/User';

class App extends React.Component {
  componentDidMount() {
    if (this.props.currentUser) {
      this.props.getUser();
    }
  }

  render() {
    return (
      <ConnectedRouter history={this.props.history}>
        <div className="app d-flex">
          <Header />
          <Switch>
            <Route path="/login" component={Login} />
            <Route path="/signup" component={Login} />
            <PrivateRoute path="/onboarding" component={OnBoarding} />
            <PrivateRoute path="/settings" component={Settings} />
          </Switch>
        </div>
      </ConnectedRouter>
    );
  }
};

const mapStateToProps = state => ({
  currentUser: currentUser(state),
});

const mapDispatchToProps = dispatch => ({
  getUser: () => dispatch(getUser()),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(App);