Learn React with TypeScript 3

Conditional redirect

We can use the Redirect component to protect pages from unauthorized users. In our shop, we can use this to ensure only logged in users can access our Admin page. We do this through the following steps:

1. Let's start by adding a route to a LoginPage in Routes.tsx after the route to the Admin page:

<Route path="/login" component={LoginPage} />

2. Of course, LoginPage doesn't exist at the moment, so, let's create a file called LoginPage.tsx and enter the following:

import * as React from "react";const LoginPage: React.SFC = () => {  return (    <div className="page-container">      <h1>Login</h1>      <p>You need to login ...</p>    </div>  );};export default LoginPage;

3. We can then go back to Routes.tsx and import LoginPage:

import LoginPage ...