react router config private route code 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

// routes.js
import Home from './components/Home'
import Login from './components/User/Login'
import User from './components/User/User'

const routes = [
	{ path: '/',
		exact: true,
		restricted: false,  // <-- NEW
		component: Home,
	},
	{
		path: '/login',
		restricted: false, // <-- NEW
		component: Login,
	},
	{
		path: '/user',
		restricted: true, // <-- NEW
		component: User,
	},
	{
		path: '*',
		restricted: false, // <-- NEW
		component: NotFound
	}
]

Example 3: 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