use private routes with react router config code example

Example 1: react-router-config private routes

// Login.js

import React from 'react'

class Login extends React.Component {
   render() {
      const { from } = this.props.location.state || { from: {pathname: '/' } }
         return (
	    <div>
	       <p>You must log in to view this page at {from.pathname} </p>
	          <button onClick={this.login}>Log in </button>
	     </div>
	 )
   }
}

export default Login

Example 2: react-router-config private routes

// renderRoutes.js

import React from 'react'
import Switch from 'react-router/Switch'
import { Route, Redirect } from 'react-router-dom'

const renderRoutes = (routes, authed, authPath, extraProps = {}, switchProps = {}) => routes ? (
  <Switch {...switchProps}>
    {routes.map((route, i) => (
      <Route
        key={route.key || i}
        path={route.path}
        exact={route.exact}
        strict={route.strict}
        render={(props) => {
          
          if( !route.restricted || authed || route.path == authPath) {
            return <route.component {...props} {...extraProps} route={route}/>
          }
          const redirPath = authPath ? authPath : '/login'
          return <Redirect to={{pathname: redirPath, state: {from: props.location}}}/>
        }}
      />
    ))}
  </Switch>
) : null

export default renderRoutes