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 stateless function PrivateRoute. It returns a standard Route component, which receives all of the properties initially given to the PrivateRoute function. To pass all properties, we use a destructuring assignment with the ...rest syntax. Using the syntax inside of curly braces on a React component passes all fields of the rest object as properties to the component. The Route component is only rendered if the given path is matched.

Furthermore, the rendered component is dependent on the user's loggedIn state variable, which we have to pass. If the user is logged in, we render the Component without any problems. Otherwise, we redirect the user to the root path of our application using the Redirect component.

Use the new PrivateRoute component in the render method of the Router and replace the old Route, as follows:

<PrivateRoute path="/app" component={() => <Main changeLoginState={this.props.changeLoginState}/>} loggedIn={this.props.loggedIn}/>

Notice that we pass the loggedIn property by taking the value from the properties of the Router itself. It initially receives the loggedIn property from the App component that we edited previously. The great thing is that the loggedIn variable can be updated from the parent App component at any time. That means that the Redirect component is rendered and the user is automatically navigated to the login form (if the user logs out, for example). We do not have to write separate logic to implement this functionality.

However, we have now created a new problem. We redirect from /app to / if the user is not logged in, but we do not have any routes set up for the initial '/' path. It makes sense for this path to either show the login form or to redirect the user to /app if the user is logged in. The pattern for the new component is the same as the preceding code for the PrivateRoute component, but in the opposite direction. Add the new LoginRoute component to the router.js file, as follows:

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

The preceding condition is inverted to render the original component. If the user is not logged in, the login form is rendered. Otherwise, they will be redirected to the posts feed.

Add the new path to the router, as follows:

<LoginRoute exact path="/" component={() => <LoginRegisterForm changeLoginState={this.props.changeLoginState}/>} loggedIn={this.props.loggedIn}/>

The code looks the same as that of the PrivateRoute component, except that we now have a new property, called exact. If we pass this property to a route, the browser's location has to match one hundred percent. The following table shows a quick example, taken from the official React Router documentation:

For the root path, we set exact to true, because otherwise the path matches with any browser's location where a / is included, as you can see in the preceding table.