September 28, 2022

Robotic Notes

All technology News

Routing with React Router 6

11 min read


Websites built with Javascript frameworks / libraries like Vue and React JS are Single Page Apps. This means that all the elements on the website are done on a single index.html page. But these frameworks have a way of making a page have nested URL routes even though it is built on a single page. These routes make the page easily navigable with the back and forward buttons of a browser and break the web app into parts.

Navigation buttons in a browser

React JS as a Single Page App library doesn’t include built-in routing capabilities as Angular does; it needs a library called react-router-dom to do this. Now, that library has been in use for a long time, but with a new version (v6) released, a lot of things have been changed in how the library is used.

In this tutorial, we will go over the react-router-dom version 6 library and see how to perform many routing tasks. At the end of this tutorial, you should have grasped how react-router-dom v6 works and how to use it to create navigation links, pass states through links, redirect pages, create nested pages, protect routes, and so on. We assume that the reader has zero knowledge of the react-router-dom library, so the tutorial is easy and accessible to beginners who haven’t used previous versions of the library before. On that note, let’s get started!

Starting a Router Project

For a quick setup of a React Application, I recommend starting a new React project at https://stackblitz.com. However, here’s a guide on installing React JS on your local machine. After that setup, if we are working locally, we must add the react-router-dom library. (On Stackblitz, just install the package as a dependency.)

1npm install react-router-dom@6

The @6 specifies that we are installing version 6 into our project. After the dependency / library is installed, we start our React project.

With everything working, we are ready to move over to the next stage.

Setting up the Router

The first thing we will do on our website is to create a component encompassing all the different routes we will have in our routing system. This component must be placed at the highest level of the App component. So, open up the project in a code editor and navigate to src/App.js.

1import React from "react";

2import { BrowserRouter } from "react-router-dom";

3

4function App() {

5 return (

6 <BrowserRouter>

7 </BrowseRouter>

8 );

9}

10

11export default App;

In this file, we imported the BrowserRouter component, and then we used the component to wrap other things in our App.js. Other types of routers have different purposes, but the docs recommend BrowserRouter for web apps.

And now, inside this BrowserRouter component, other components and hooks from react-router-dom can work.

Let’s create a Header on our website before creating the navigation links.

1import React from "react";

2import {BrowserRouter} from "react-router-dom";

3

4function App() {

5 return (

6 <BrowserRouter>

7 <header>

8 <h1>Hello World</h1>

9 </header>

10 </BrowseRouter>

11 );

12}

13

14export default App;

We will create some navigation links that will point to some routes inside our App.js. These routes are created inside the App.js because we want them to be visible on every page. To do that, we must import the NavLink component. The NavLink component is a link component (similar to the <a> tag) that knows whether or not it is “active”, meaning it can highlight itself the current page is the page it routes to is on display.

In our src/App.js:

1import React from "react";

2import { BrowserRouter, NavLink } from "react-router-dom";

3

4function App() {

5 return (

6 <BrowserRouter>

7 <header>

8 <h1>Hello World</h1>

9 </header>

10 <nav>

11 <NavLink to="">Home</NavLink>

12 </nav>

13 </BrowserRouter>

14 );

15}

16

17export default App;

And we should have the picture below on display.

First version of the app

Now, we have a component that points us to the route / whenever we click on it. The to prop shows the Navlink where to go.

We will create some more navigation links using the NavLink component.

1import React from 'react';

2import { BrowserRouter, NavLink } from 'react-router-dom';

3

4function App() {

5 return (

6 <BrowserRouter>

7 <header>

8 <h1>Hello World</h1>

9 </header>

10 <nav>

11 <NavLink to="">Home</NavLink>

12 <NavLink to="about">About</NavLink>

13 <NavLink to="contact">Contact</NavLink>

14 </nav>

15 </BrowserRouter>

16 );

17}

18

19export default App;

And now, we will have this displayed.

Modified app

These links lead to the routes /home, /aboutand /contact. And whenever they are clicked, the URL of the webpage changes conveying the routes.

Adding the Active Class

The active class merely highlights a link when the page is currently where the link points to. To add it, we first need to define a class that will contain all the styles of our active NavLink. The style class will be defined inside our style.css file.

src/style.css

1.nav-active {

2 color: grey;

3 font-weight: bold;

4}

And then, we make sure we import our CSS file into our App.js. (change the export default on all files).

After that, inside our App.js, we create a string containing the class’s name and write a conditional statement that adds the class name whenever it is active. This is possible due to the isActive boolean we are exposed to.

src/App.js

1import React from 'react';

2import './style.css'

3import { BrowserRouter, NavLink } from 'react-router-dom';

4

5export default function App() {

6 let activeClassName = "nav-active";

7 return (

8 <BrowserRouter>

9 <header>

10 <h1>Hello World</h1>

11 </header>

12 <nav>

13 <NavLink to="" className={({ isActive }) => isActive ? activeClassName : undefined}>Home</NavLink>

14 <NavLink to="about" className={({ isActive }) => isActive ? activeClassName : undefined}>About</NavLink>

15 <NavLink to="contact" className={({ isActive }) => isActive ? activeClassName : undefined}>Contact</NavLink>

16 </nav>

17 </BrowserRouter>

18 );

19}

Styles, applied

As we can see, the styles are applied to the links when clicked.

Adding Pages to the Routes

Now, we will see how to create pages that correspond to the routes. For this, we need to create a folder called pages inside our src folder and create the following pages:

  • Home.js
  • About.js
  • Contact.js
  • Error.js

Pages to be created

After Creating the pages, we will add some content to the pages.

/src/pages/Home.js

1import React from 'react';

2

3function Home(){

4 return (

5 <div>

6 <p>This is the Home Page</p>

7 </div>

8 )

9}

10

11export default Home;

/src/pages/About.js

1import React from 'react';

2

3function About(){

4 return (

5 <div>

6 <p>This is the About Page</p>

7 </div>

8 )

9}

10

11export default About;

/src/pages/Contact.js

1import React from 'react';

2

3function Contact(){

4 return (

5 <div>

6 <p>This is the Contact Page</p>

7 </div>

8 )

9}

10

11export default Contact;

/src/pages/Error.js

1import React from 'react';

2

3function Error(){

4 return (

5 <div>

6 <p>This is the Error Page</p>

7 </div>

8 )

9}

10

11export default Home;

The Error page was created so that routes that don’t match any of the above-defined routes are assigned to the Error Page.

Now, the next thing to do is make these routes show whenever we navigate a particular route.

First of all, we need to import a component from react-router-dom called Routes. The Routes component will contain all the different possible routes that can be displayed on that particular segment of a page, and it can be looked at as an array of Routes.

/src/App.js

1import React from 'react';

2import './style.css'

3import { BrowserRouter, NavLink, Routes } from 'react-router-dom';

4

5export default function App() {

6 let activeClassName = "nav-active";

7 return (

8 <BrowserRouter>

9 <header>

10 <h1>Hello World</h1>

11 </header>

12 <nav>

13 <NavLink to="" className={({ isActive }) => isActive && activeClassName}>Home</NavLink>

14 <NavLink to="about" className={({ isActive }) => isActive && activeClassName}>About</NavLink>

15 <NavLink to="contact" className={({ isActive }) => isActive && activeClassName}>Contact</NavLink>

16 </nav>

17 <Routes>

18

19 </Routes>

20 </BrowserRouter>

21 );

22}

To define individual Routes that can be possibly displayed in the Routes component, we use another component called Route.

The Route component accepts two props.

  • path: This is the path to which the page URL should navigate. This prop is similar to the to prop of the NavLink component.
  • element: This contains the element that will be rendered when the page navigates to that route.

/src/App.js

1import React from 'react';

2import './style.css'

3import Home from './pages/Home'

4import About from './pages/About'

5import Contact from './pages/Contact'

6import Error from './pages/Error'

7import { BrowserRouter, NavLink, Routes, Route } from 'react-router-dom';

8

9export default function App() {

10 let activeClassName = "nav-active";

11 return (

12 <BrowserRouter>

13 <header>

14 <h1>Hello World</h1>

15 </header>

16 <nav>

17 <NavLink to="" className={({ isActive }) => isActive && activeClassName}>Home</NavLink>

18 <NavLink to="about" className={({ isActive }) => isActive && activeClassName}>About</NavLink>

19 <NavLink to="contact" className={({ isActive }) => isActive && activeClassName}>Contact</NavLink>

20 </nav>

21 <Routes>

22 <Route path="/" element={<Home/>} />

23 <Route path="about" element={<About/>} />

24 <Route path="contact" element={<Contact/>} />

25 <Route path="*" element={<Error/>} />

26 </Routes>

27 </BrowserRouter>

28 );

29}

After creating the Routes, the nav links should lead to the pages they are designated to.

Links, working

The way to create regular links in react-router-dom is by using the Link component.

NOTE: Link component is very similar to the NavLink component. The only difference is that NavLink knows when it is active while Link does not.

We will import it into the component / page we want to use it.

For example, we will create a Link inside our Contact page that points to the home page.

/src/pages/Contact.js

1import React from 'react';

2import { Link } from 'react-router-dom';

3

4function Contact(){

5 return (

6 <div>

7 <p>This is the Contact page</p>

8 <Link to="/">Back to Home</Link>

9 </div>

10 )

11}

12

13export default Contact;

Link to home

NOTE: To link to pages, use a ”/”, which shows that we are navigating to the base route. To navigate to other base route pages, we use a / and the name, eg /contact, /aboutetc.

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

replayer.png

Start enjoying your debugging experience – start using OpenReplay for free.

Redirecting to another Page

Suppose we created a Dashboard page that will redirect us to the home page when clicked. There are two ways to do this in react-router-dom v6.

  • Using the Navigate component
  • Using the useNavigate hook

Using the Navigate component

The Navigate element changes the current location of the page whenever rendered. The way to use the Navigate element is to

  • import the Navigate component from react-router-dom.
  • Add a to prop that points to the location the page is to redirect to.

Adding the dashboard to a nav link in src/App.js

1import React from 'react';

2import './style.css'

3import Home from './pages/Home'

4import About from './pages/About'

5import Contact from './pages/Contact'

6import Error from './pages/Error'

7import { BrowserRouter, NavLink, Routes, Route, Navigate } from 'react-router-dom';

8

9export default function App() {

10 let activeClassName = "nav-active";

11 return (

12 <BrowserRouter>

13 <header>

14 <h1>Hello World</h1>

15 </header>

16 <nav>

17 <NavLink to="" className={({ isActive }) => isActive && activeClassName}>Home</NavLink>

18 <NavLink to="about" className={({ isActive }) => isActive && activeClassName}>About</NavLink>

19 <NavLink to="contact" className={({ isActive }) => isActive && activeClassName}>Contact</NavLink>

20 <NavLink to="dashboard">Dashboard</NavLink>

21 </nav>

22 <Routes>

23 <Route path="/" element={<Home/>} />

24 <Route path="about" element={<About/>} />

25 <Route path="contact" element={<Contact/>} />

26 <Route path="dashboard" element={<Navigate to="/" />} />

27 <Route path="*" element={<Error/>} />

28 </Routes>

29 </BrowserRouter>

30 );

31}

Redirection

And now, whenever we click on the dashboard link, it takes us back to the home page.

Using the useNavigate hook

The useNavigate hook can also be used to redirect pages. Suppose we have a button on our About page that redirects us to the homepage. We will:

  • import the useNavigate hook
  • define a variable called navigate that calls the useNavigate function
  • call the navigate function and give the path to be redirected to as a parameter

/src/pages/About.js

1import React from 'react';

2import { useNavigate } from 'react-router-dom';

3

4function About(){

5 let navigate = useNavigate();

6 return (

7 <div>

8 <p>This is the About Page</p>

9 <button onClick={()=> navigate("/")}>Redirect</button>

10 </div>

11 )

12}

13

14export default About;

And we should have this:

Redirection with the hook

Passing States with Router

While passing states in react-router-domthere are three ways to achieve this:

  • Using the Link component
  • Using the Navigate component
  • Using the useNavigate hook

We will pass data using the Link component from our Contact page to our Home page.

/src/pages/Contact.js

1import React from 'react';

2import { Link } from 'react-router-dom';

3

4function Contact(){

5 return (

6 <div>

7 <p>This is the Contact page</p>

8 {}

9 <Link to="/" state={"From Contact Page"}>Back to Home</Link>

10 </div>

11 )

12}

13

14export default Contact;

And now, to access the state, we use another hook called useLocation inside the page receiving the information (Home Page). This hook will expose us to the value inside the state variable.

/src/pages/Home.js

1import React from 'react';

2import { useLocation } from 'react-router-dom'

3

4function Home(){

5 let location = useLocation();

6 return (

7 <div>

8 <p>This is the Home Page</p>

9 { location.state && <p>From Dashboard</p>}

10 </div>

11 )

12}

13

14export default Home;

Links in a page

Using the Navigate component

The Navigate component can also pass states in a react-router-dom. This is done by giving the Component state prop that contains the value we will want it to have. For example, our Dashboard redirects to our Home Page using the Navigate component. Now we will pass a state value into the Navigate component, which will get displayed on the Home page.

/src/App.js

1...

2

3<Route path="dashboard" element={<Navigate to="/" state={"From Dashboard"}/>} />

4

5...

/src/pages/Home.js

1import React from 'react';

2import { useLocation } from 'react-router-dom'

3

4function Home(){

5 let location = useLocation();

6 return (

7 <div>

8 <p>This is the Home Page</p>

9 { location.state && <p>From Dashboard</p>}

10 </div>

11 )

12}

13

14export default Home;

Using the navigate component

Using the useNavigate hook

The function navigate()which we called when learning how to redirect pages using the useNavigate hook, accepts two parameters: to and an object that contains a state. We will make the Redirect button carry a state to the home page.

/src/pages/About.js

1import React from 'react';

2import { useNavigate } from 'react-router-dom';

3

4function About(){

5 let navigate = useNavigate();

6 return (

7 <div>

8 <p>This is the About Page</p>

9 <button onClick={()=> navigate("/", { state: "From the About Page"})}>Redirect</button>

10 </div>

11 )

12}

13

14export default About;

/src/pages/Home.js

1import React from 'react';

2import { useLocation } from 'react-router-dom'

3

4function Home(){

5 let location = useLocation();

6 return (

7 <div>

8 <p>This is the Home Page</p>

9 { location.state && <p>From the About Page</p>}

10 </div>

11 )

12}

13

14export default Home;

Using the useNavigate hook

Protected Routes

Sometimes in our routing system, we might not want users to visit a particular page if they are not authenticated. We stop users from accessing these pages by protecting the routes.

Setting up a simple Auth System

In this part of the tutorial, we will bring in the useState hook, which will help us set a boolean login state. This state will then determine if the user can be taken to the dashboard page, which is the route we would like to protect.

/src/App.js

1...

2let [loggedIn, setLoggedIn] = useState(null);

3function handleLogin(){

4 setLoggedIn(true);

5}

6function handleLogout(){

7 setloggedin(false);

8}

9...

10<Route path="/" element={<Home login={handleLogin} />} />

11...

Now, we have a function that logs a user in, and a function that logs a user out, and we have passed that function as a prop to the Home component. The next thing to do is create a login button on the home page.

/src/pages/Home.js

1import React from 'react';

2import { useLocation } from 'react-router-dom';

3

4function Home({ login }) {

5 let location = useLocation();

6 return (

7 <div>

8 <p>This is the Home Page</p>

9 <button onClick={login}>Login</button>

10 {}

11 </div>

12 );

13}

14

15export default Home;

Basic auth

So, the user is automatically logged in whenever he clicks Login.

Creating a Dashboard Page

This will be the page where the user will be redirected whenever logged in. We will create a new /Dashboard.js file inside the pages folder and then add the following code.

/src/pages/Dashboard.js

1import React from 'react';

2

3function Dasboard({ logout}){

4 return (

5 <div>

6 <p>Welcome User </p>

7 <button onClick={logout}>Logout</button>

8

9 </div>

10 )

11}

12

13export default Dashboard;

Protecting the Dashboard Page

To protect the Dashboard page, we will write a conditional statement on the route of the dashboard.

/src/App.js

1...

2import Dashboard from './pages/Dashboard'

3...

4<Route

5 path="/"

6 element={

7 loggedIn ?

8 <Navigate to="/dashboard"/> :

9 <Home login={handleLogin} />}

10/>

11<Route

12 path="dashboard"

13 element={

14 loggedIn ?

15 <Dashboard logout={handleLogout}/> :

16 <Navigate to="/" state="From Dashboard" />}

17/>

This will prevent the user from accessing the route if the user is not logged in. But once the user is logged in, the route is now accessible. Finally, let us redirect to the dashboard whenever the user clicks the Logout button.

/src/pages/Home.js

1import React from 'react';

2import { useNavigate } from 'react-router-dom';

3

4function Home({ login }) {

5 let navigate = useNavigate();

6 return (

7 <div>

8 <p>This is the Home Page</p>

9 <button onClick={()=>{

10 login();

11 navigate('/dashboard')

12 }}>

13 Login

14 </button>

15 {}

16 </div>

17 );

18}

19

20export default Home;

And now, we should have a fully working simple Auth system and protected Dashboard route.

A fully working auth system

Adding Nested Routes

We are going to create a /dashboard/settings route which means we will have the settings route inside the dashboard route.

/src/App.js

1...

2<Route

3 path="dashboard"

4 element={

5 loggedIn ?

6 <Dashboard logout={handleLogout}/> :

7 <Navigate to="/" state="From Dashboard" />}

8>

9 <Route path="settings" element={<p>This is the nested Settings route</p>}/>

10</Route>

11...

The nested Route component creates a /settings inside /dashboard. But for this to work, we must import the Outlet component into our Dashboard.js.

/src/pages/Dashboard.js

1import React from 'react';

2import { Outlet, Link } from 'react-router-dom';

3

4function Dasboard({ logout }){

5 return (

6 <div>

7 <p>Welcome User </p>

8 <Link to="settings">Settings</Link>

9 <Outlet/>

10 <button onClick={logout}>Logout</button>

11 </div>

12 )

13}

14

15export default Dashboard;

Nested routes

Using useParams

useParams is a react-router-dom hook with access to a URL parameter value. We will create a Profile.js page that will grab whatever id we give the URL and display it on the page.

/src/pages/Profile.js

1import React from 'react';

2import { useParams } from 'react-router-dom';

3

4function Profile(){

5 let { userId } = useParams();

6 return (

7 <div>

8 <p>The id of this user is { userId }</p>

9 </div>

10 )

11}

12

13export default Profile;

/src/App.js

1import Profile from './pages/Profile'

2...

3<Route path="profile">

4 <Route path=":userId" element={<Profile/>}/>

5</Route>

And now, whenever we navigate to /profile/1 (Note: The id can be any value), we have this displayed:

Route with parameters

Conclusion

react-router-dom v6 is a library with many features, and we have gone over the basics of how the library works. We have learned

  • Creating navigation links
  • Adding pages to routes
  • Creating normal links
  • Redirecting pages
  • Protecting routes and a lot more!

With this, you should comfortably know how to use the react-router-dom library version 6.

The source code of all the operations performed in this tutorial can be found here on Stackblitz. https://stackblitz.com/edit/react-kunxgu

References

newsletter



Source link