Okay, so you're learning ReactJs - Congrats! You just figured you need to link the pages you've created right? In pure HTML, we use the anchor tag "a". Technically, React doesn't link to another page, it only loads a new component on the same page. This is how single-page applications work. Read more about SPA here
React uses react-router-dom to link to different pages. React-router-dom is a react library that provides functions to specify different routes and link to them. In a nutshell, it provides a more efficient way of displaying multiple pages to users. In this article, you'd see why react-router is used in react applications instead of the traditional anchor tag and how to use react-router in your react app.
Prerequisites.
- A basic knowledge of Reactjs is just fine.
Why use react-router?
- Simply put, It is the react way of navigating pages in a react application. What are its advantages?
Before you started learning React, you probably read or heard that react is fast. This is one of the things that makes react fast. How? It reduces the number of requests made to the server and thus, enhances performance.
How does react-router reduce the number of requests made to the server?
The files that make up a website are usually on a server(could be your computer or one on the internet). If these pages are linked, the browser has to make a request to the server to fetch the file(this has both it's advantages and disadvantages). It is not the same in a react app using react-router. The browser would not have to make any request to the server - React would render the component(page) on the browser almost immediately.
How to use React router in your react application.
- Create your react project if you haven't already.
npx create-react-app reactrouter
Create a /pages folder inside the src folder. Inside the pages folder, add (Home, About, and Contact) with the .js or .jsx extension.
In your Home.js file,
import React from "react"
const Home = () => {
return(
<div>
<h1>Home page</h1>
</div>
)
};
export const Home;
Do the same for About.js and Contact.js.
Install react-router-dom via npm.
This is done in the terminal by typing;
npm install react-router-dom
This process shouldn’t take long depending on your internet speed.
Get ready to use the Link tag anywhere in your app.
The Link tag is the alternative for the a tag in react. It takes an argument “to” i.e . It is used to link to pages in your react app.
import { Link } from "react-router-dom"
const Nav = () => {
return (
<div>
<Link to = "/"> Home </Link>
<Link to = "/About"> about </Link>
<Link to = "/Contact"> contact </Link>
</div>
)
}
export default Nav;
Import react-router-dom in your app.
Open your App.js file in your src folder
type –
import {BrowserRouter as Router, Route, Switch} from “react-router-dom”;
Why did we import Router, Route, and Switch?
Router: The tag is used to wrap the entire App.js return element. This tells react that the application is routed.
Route: The tag is a self-closing tag that specifies the component to render based on the URL. It takes the arguments - "path"(specifies the path) and "component"(specifies the component to render if the path exists in the URL.
Switch: The tag is used to wrap multiple tags.
import React from "react";
import {BrowserRouter as Router, Route, Switch} from “react-router-dom”;
import About from "./About.js";
import Contact from "./Contact.js";
import Nav from "./Nav.js";
const App = () => {
return(
<Router>
<div >
<Nav />
<div>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</div>
</Router>
)};
In the image above,
- The Router tag encloses every other thing in the return statement.
- The Switch tag wraps the routes because we have more than one route.
- The Home component route also has an extra argument - "exact". exact tells react that if the URL contains just "/" that component should be rendered. If "exact" is not specified, we would have a bug to deal with because every other URL starts with "/". So it is more like saying if the route is exactly "/" render this component(the component specified).
Viola! With the App.js file setup to support routing, you can access the linked pages from your navbar.
Conclusion:
If your react app needs to display multiple pages to a user, react-router provides a cleaner and more efficient way to display multiple pages to users in a react app. It makes managing routes a lot easier.
If you found this article helpful, let me know in the comment section.
Feel free to connect with me on Twitter
