Hands-On Full-Stack Web Development with GraphQL and React

Secured routes

Secured routes represent a to specific paths that are only the is authenticated, or has the correct authorization.

The recommended solution to implement secure routes in React Router version 4 is to write a small, stateless function that conditionally renders either a Redirect component or the component specified on the route that requires an authenticated user. We extract the component property of the route into the Component variable, which is a renderable React object. Insert the following code into the router.js file:

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

We call the ...