10. Advanced Routing Techniques: Special Cases

Activity 10.01: Creating Authentication Using Routing Techniques

Solution:

Note

The code for this activity can be found here: https://packt.live/3bAUFrz.

Let's implement the tasks one by one:

1. Create a new React app:

   $ npx create-react-app [name]

2. Go to the src/App.js file, delete logo.svg and App.css, and clear out the contents of App.js.
3. Inside App.js, create a new React functional component called App.
4. Install the required dependencies:

   $ npm install formik react-router-dom

5. Create a 404 page. Using what we have learned about 404 pages, we will define our main application with one route:

   import React from 'react';
   import {
     BrowserRouter as Router,
     Route,
     Switch,
     Redirect,
     useLocation
   } from 'react-router-dom';
   import './App.css';
   function App() {
     return (
       <div className=...