2020 Setting up a Private Route in React

This tutorial follows Tutorial 1

Provided you are using react-router-dom the code should still work for you. I will be linking the github repo ASAP

Step1

Setup files needed for tutorial.

1. Open your Project in VsCode a. cd projects/yourprojectnamehere b. code . c. or Just use the file menu
2. Open the VS Code Terminal and Get the status of git. a. git status 1. You should be on the master branch and your working tree should be clean
3. Checkout to a new branch and set the upstream a. git checkout -b <Tutorial-2-PrivateRoute> b. git push -u origin <Tutorial-2-PrivateRoute>
4. Create a PrivateRoute file a. touch src/cofigs/PrivateRoute.jsx
5. Create a private file a. touch pages/admin/AdminHome.jsx
6. Add some content to the AdminHome file

import React from 'react'

const AdminHome = () => {
return (
<div>
<h1>Welcome home Admin</h1>
</div>
)
}

export default AdminHome

Step 2

Creating the Private Route File.

1. Import React, Route and Redirect a. imr b. imd c. import { Route as R, Redirect as RD } from 'react-router-dom';
2. Setup the arrow fucntion

Note: We are not using |rafce| here because we are bringing in props. (More to be explained later)

a.

const PrivateRoute = ({ component: Component, ...rest }) = {

   <R
{...rest}
render={props =>
  localStorage.getItem('token') ?
(
<Component {...props} />
):
(
<RD to='/' />
)
  }
[/](file:///)>
   );
  export default PrivateRoute;

Lets Break this down:

Components - let you split and isolate the UI into independent, reuseable pieces they are like JS functions
Props - the inputs that components accept
Render - Display
Ternary - If Else Statement
localStorage - a place where you can store data on a users machine to be used by the site
... - Spread operator - expands a string, object, or array into it's elements

What are we doing?

1. We are bringing the component property defined on props from our AppRouter file (we will hook this up in a minute) and assinging it to a new location in state called Component.
2. We are then taking any remaining objects defined on props and collecting them in an argument called ...rest
3. After this we are setting up a route to render our props to our private componenet IF there is a token in localStorage otherwise, we are redirecting to home.

Step 3

Setting up the AppRouter file to render the PrivateRoute

1. Open the AppRouter.jsx file and import PrivateRoute a. import PrivateRoute from './PrivateRoute.jsx';
2. Import the AdminHome Page a. import AdminHome from '../pages/admin/AdminHome.jsx';
3. Add a Private Route to the AdminHome Page a. <PrivateRoute path='/admin/AdminHome' componenet={AdminHome} />
4. Add a NavLink to the AdminHome page a. open the NavBar.jsx file b. <NL to='/admin/adminhome/'>Admin Home<NL/>

Step 4

Tying it all together

1. Run your app a. npm start
2. Open your developer tools (Chrome) Firefox works too a. right click on the page b. click inspect
3. Clear Tokens from localStorage if any a. In the top of the developer tool click Application b. To the right click Local Storage c. Open the local storage for the page you are on d. if there is a token delete it (click and press the x)
4. Try to navigate to AdminHome a. It should not work and redirect you to Home
5. Add a token a. In the place where we checked for tokens double click the key field and type token (be sure this matches what you are calling from local storage) b. Give your token any value
6. Navigate to your Admin Home
7. Add, Commit, Push, and Pull Request your new private route