Use the Redirect Routes

Now that we created the AuthenticatedRoute and UnauthenticatedRoute in the last chapter, let's use them on the containers we want to secure.

First import them in the header of `src/Routes.tsx`.
import AuthenticatedRoute from "./components/AuthenticatedRoute";
import UnauthenticatedRoute from "./components/UnauthenticatedRoute";

Next, we simply switch to our new redirect routes.

So the following routes in src/Routes.tsx would be affected.

<AppliedRoute path="/login" exact component={Login} appProps={appProps} />
<AppliedRoute path="/signup" exact component={Signup} appProps={appProps} />
<AppliedRoute path="/settings" exact component={Settings} appProps={appProps} />
<AppliedRoute path="/notes/new" exact component={NewNote} appProps={appProps} />
<AppliedRoute path="/notes/:id" exact component={Notes} appProps={appProps} />
They should now look like so:
<UnauthenticatedRoute path="/login" exact component={Login} appProps={appProps} />
<UnauthenticatedRoute path="/signup" exact component={Signup} appProps={appProps} />
<AuthenticatedRoute path="/settings" exact component={Settings} appProps={appProps} />
<AuthenticatedRoute path="/notes/new" exact component={NewNote} appProps={appProps} />
<AuthenticatedRoute path="/notes/:id" exact component={Notes} appProps={appProps} />

And now if we tried to load a note page while not logged in, we would be redirected to the login page with a reference to the note page.

Note page redirected to login screenshot

Next, we are going to use the reference to redirect to the note page after we login.