If you take anything away from this lesson, it should be that React Router treats everything as a component. To get fully comfortable using React Router in your code, you have to embrace this idea and the declarative coding style that follows from it. For the most part, this is pretty intuitive, but it can feel a bit counterintuitive when it comes to redirecting users.

To appreciate the declarative pattern, consider a common case for redirecting a user: a user wants to access a /profile page that requires authentication but is not currently signed in.

The Navigate component provided by React Router makes this easy! Like a Link or NavLink, the Navigate component has a to prop. However, where Link and NavLink must be clicked to navigate the user, once the Navigate component is rendered, the user will automatically be taken to the location specified by the to prop:

import { Navigate } from 'react-router-dom';

const UserProfile = ({ loggedIn }) => {
  if (!loggedIn) {
    return (
      <Navigate to='/' />
    )
  }

  return (
    // ... user profile content here
  )  
}

In this example, when the UserProfile component renders, if the loggedIn prop is false, then the Navigate component will be returned and then rendered, sending the user to the / page. Otherwise, the component will render normally.

Let’s practice declaratively redirecting non-logged-in users in our application.