private routes react example

Example 1: react-router-config private routes

// caller of renderRoutes

import React from 'react'
import { Switch } from 'react-router-dom'
//import { renderRoutes } from 'react-router-config'
import renderRoutes from '../renderRoutes'
import routes from '../routes3'

const authed = false // <-- You can change this
const authPath = '/login' // <-- You can change this

const Main = () => (
   <main>
      <Switch>
         {renderRoutes(routes, authed, authPath)}
      </Switch>
   </main>
)

export default Main

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