Table of Contents
- Introduction
- Prerequisites
- Installation of React Router
- Understanding BrowserRouter, Routes, and Links
- Adding links and Routes
- Conclusion
Introduction
React Router is the standard and most popular routing library for React. It is used to navigate between components in the React application by enabling changes in the browser URL while keeping the UI in sync with the URL.
React Router's primary advantage over conventional routing is its ability to build a single web application without the webpage refreshing each time the user clicks to another page.
In this article, we will create a simple React application that navigates to the home, about, and contact file components to fully understand how to use routers. And by the end of this article, you should have a good understanding of React Routers and how they work.
Prerequisites
To follow along in this article, you need to know how components work in React. It is also required you have the following installed on your local computer.
Installation of React Router
There are two different versions of the React Router package: the web version and the React Native version. We will install the web version for this tutorial. Kindly follow these steps:
1 Create a new React App
Open your code editor's terminal and change the directory to where you want your React app installed. For this tutorial, we navigate into the documents folder.
cd documents
Input the code below into the terminal, to create a new React app to start this simple Project.
npx create-react-app multi-page-react
2 Navigate to the file directory and use npm to install the package
cd multi-page-react
npm install react-router-dom@6
Or, if you are familiar with the yarn command, use
yarn add react-router-dom@6
This installation allows React Router to be used globally on the React application. The “@6” indicates that we want to install version 6, the latest React Router version.
3 Open the file on your code editor and run a live page using a new terminal
npm start run
This puts the React application on a live browser and usually runs on the local computer's default URL (localhost:3000).
Components Setup
In creating an application with multiple page routes, we will create a folder inside the src folder to keep our individual components page. Each of the files will have a react component in it.
src\MultiplePages\:
- Home.js
- About.js
- Contact.js
Home.js
export default function Home() {
return (
<div>
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, se do…</p>
</div>
)
}
About.js
export default function About() {
return (
<div>
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, se do…</p>
</div>
)
}
Contact.js
export default function Contact() {
return (
<div>
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, se do…</p>
</div>
)
}
In the above code snippets, we created Home, About, and Contact components on the React app, and each component is populated with ”Lorem ipsum dolor…” text.
Understanding BrowserRouter, Routes, and Links
BrowserRouter
This is the parent component used to wrap all other components. It keeps the User Interface(UI) of the React app in sync with the browser URL.
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(
document.getElementById("root")
);
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
To make React Router accessible everywhere on the app, open the index.JS file, import the BrowserRouter from react-router-dom and wrap the app component in the <BrowserRouter></BrowserRouter>. This action renders the react app as a whole to Browser Router.
Routes
A Route shows a component that provides UI when it matches the URL. With the route comes “Exact” and “path.” “Path” specifies a pathName to which a component is assigned. Exact ensures a route is only returned when a path is an exact match to the current URL.
<Routes>
<Route exact path='/' element={< Home />}></Route>
<Route exact path='/about' element={< About />}></Route>
<Route exact path='/contact' element={< Contact />}></Route>
</Routes>
The above code snippet shows the exact path for each component embedded in the <Route></Route>. This is embedded in the parent <Routes></Routes> in the App.JS file.
Links
Links work as anchor tags in HTML; they provide links to different routes for navigation on the application. However, a major difference between Links and an HTML anchor tag is that when Links are clicked on, they do not refresh the page but rather switch the UI.
<div className="App">
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/About">About</Link>
</li>
<li>
<Link to="/Contact">Contact</Link>
</li>
</ul>
</div>
The path of each component is embedded in the <Links></Links> tag. The Links are arranged using HTML syntax of lists <li></li> as depicted above. All of this is injected into the App div in the App.js file.
Remember to import all dependencies in the App.js, as shown below.
import {Routes, Route, Link } from 'react-router-dom'
import Home from './MultiplePages/Home';
import Contact from './MultiplePages/Contact';
import About from './MultiplePages/About';
The essence of importing the dependencies is to ensure its features can be assessed globally.
Conclusion
The application of React Router in React improves the user interface and experience by making navigating a web page easier. With the above steps, we have created a simple react project that navigates to several pages using React Router.
Click here to access the project’s codes and webpage for in-depth study and practice. Happy coding!