ProtectedRoute, Header Authentication and All Products Section

 

1.Router Switch

Switch can have any React Component inside it

• Route
• User defined Component
• Redirect

2. Wrapper Component

Redirection Logic can be reused by separating out into a React Component called Wrapper Component. Each route will be wrapped with it.

2.1 Protected Route

ProtectedRoute is the Wrapper Component which returns Home Route Component.

File: src/components/ProtectedRoute/index.js

1

2

3

4

5

6

7

8

9

10

11

12

import { Route, Redirect } from "react-router-dom";

import Cookies from "js-cookie";

const ProtectedRoute = (props) => {

const token = Cookies.get("jwt_token");

if (token === undefined) {

return <Redirect to="/login" />;

}

return <Route {...props} />;

};

export default ProtectedRoute;

JSX

Collapse

3. E-Commerce Application