Quick Summary:
If you are planning to create a multipage React website and want to leverage all the perks of the React library, then I have created this hands-on guide to get your hands on React Routing with Router hooks. Let’s go through this React Router Hooks tutorial and start learning!
ReactJS is a front-end library based on Javascript, which helps us to create the user interface at our ease. And for managing the navigation of a multipage website, we’ll be needing a third-party library like React Router.
Thus, in this React Router tutorial, we’ll dig deep and understand routing in React.
React Routing is a process of showing various pages on their respective URL. Users can have the liberty to navigate the pages by manually writing the URL or clicking the element. You need to install the react-router library to enable the routing in the React application.
React Router library provides three packages:
react-router, react-router-dom, and react-router native.
The react-router offers you the core functionality; react-router-dom and react-router-native are dependent on your projects’ environment. One should use react-router-dom for website development and React-router-native for mobile application development.
For installing React Router, you can use npm or yarn and run the following commands.
yarn add react-router-dom
OR
npm install react-router-dom
We have done the installation of the router successfully! Let’s move ahead to get some knowledge regarding the basics of React Router.
Router Component
We have to wrap our component with component. As far as this is a website development, we can use either BrowserRouter Component or Hash Component. We will be using the BrowserRouter Component here.
So, let’s wrap the component by importing the component from react-router-dom.
// /src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
,
document.getElementById("root")
);
By this, we can apply the routing to our entire application.
You are free to use BrowserRouter directly. I prefer to write it like this. The code written above will create the history object for the component.
Every component written for wrapping a parent component (here component) will generate the stack of previous locations and keep the record of the current location (history.location).
Whenever the current location changes, the view re-renders, and you can see navigation between the pages.
There must be a question about how does the current location change?
Or what makes it update the current location?
Here is the answer, the history object consists of these two methods- history.push and history.replace.
On clicking the component history.push will invoke and component history.replace.
Link and Route Component
component is considered as an essential component in React Router. Its function is to render the UI whose current location matches the path (it is a prop under the Route component) of the route.
component is used for navigating between the pages. We can compare it to the tag of the HTML; the only difference is that refreshes the page, which we don’t need. Thus, we will use for navigating without refreshing the page.
Okay, so I believe we are good till here. Great! Let’s move ahead and make an application for the react-router example.
// /src/App.js
import React from "react";
import { Link, Route, Switch } from "react-router-dom";
const Home = ( ) => (
This is the Home page
);
const About = ( ) => (
This is an About page
);
const Contact = ( ) => (
This is the Contact Page
);
const Products = ( ) => (
This is the Products Page
);
export default function App() {
return (
Home
About
Contact
Products
{ /* when the path prop will match the current URL these components will render */}
);
}
Here we have four components – Home, About, Contact, and Products with their respective routes ( URL) /home, /about, /contact, and /products. The components consist of the logic for rendering the pages. components can be said as the tag and are used for navigation. Whenever the prop path changes and matches the current URL, the matching route’s component renders.
Assume I’m on the Home page so that the prop path would be /home.
Now further, I clicked the About link. So, directly the prop path would change to /about from /home. Hence, it will check the component’s logic and render the component.
I have written the code in the file App.js, but as the components exceed more code lines, I’ll create separate components for each.
There’s a problem with this routing, though. Even if we switch the pages and click the link, we will always see the Home page. Whenever React Router checks its prop path, it will redirect to the component which is starting with / and thus it will always display the Home page because its path is / Assume I clicked the Products page. Now I’ll see both the Home page and Products page because / matches both / and /products.
To overcome this default behavior of react routing, we can use the prop exact in the component. Rewrite the component for the Home page.
By updating the code as above, the Home page will render when it matches the exact route, i.e., /
We are done with the necessary explanation with a simple example of react routing. Now, assume that we have sub-categories of the products, i.e., product_one and product_two; how will we write the logic for its routing? In such a case, where we have sub-categories, we tend to use nested routing. Our next topic of the react router tutorial is Dynamic Nested Routing; let’s see what it has.
For having your hands on Dynamic Nested Routing, we should first know thoroughly. will render a component if the path will match or null if it doesn’t. The documentation of React Router states that –
The recommended method of rendering something with a is to use children elements. There are, however, a few other methods you can use to render something with a . These are provided mostly for supporting apps that were built with earlier versions of the router before hooks were introduced.
So let’s discuss those methods-
} / >
So, this was the overview of how manages to render the components. Let’s learn about how to implement Dynamic Nested Routing.
Remember I gave you the scenario above for the sub-categories of products; we will take that as an example and understand the nested routing.
// /src/App.js
import React from "react";
import { Link, Route, Switch } from "react-router-dom";
import Products from "./Products";
const Home = () => (
This is the Home page
);
const About = () => (
This is an About page
);
const Contact = () => (
This is the Contact Page
);
export default function App() {
return (
Home
About
Contact
Products
{ /* when the path prop will match the current URL these components will render */}
);
}
I created a separate component for the Products to make it neat and clean.
Here’s the code for Products.js
// src/Products.js
import React from "react";
import { Link, Route, useParams, useRouteMatch } from "react-router-dom";
const Item = ( ) => {
const { name } = useParams();
return (
{name}
);
}
const Products = ( ) => {
const { url, path } = useRouteMatch();
return (
Product One
Product Two
);
};
export default Products;
Here we have used the useRouteMatch hook in order to match URLs just like . As the documentation of React Routing have mentioned
The useRouteMatch hook either:
If you have confusion regarding the useRouteMatch hook, you can console.log(useRouteMatch()) and clarify a few things.
We will not hard code the routings; instead, we will try to attempt dynamic routing. We will use a variable within the prop path and :product-name will be the path parameter that will find after /products until we come across another forward slash. We will further use the useParams hook for accessing the value in the component.
Okay, so far, we have covered Installation of React Router Dom, Basic and Dynamic Nested Routing in the react router tutorial, now it’s time to move ahead with the Router Hooks.
React Router hooks had made things a lot easier than before. Now the history, parameters, or location is accessible in a straightforward way. For React Router hooks, you must check that you are using the React version greater than or equal to 16.8.
Here are the React Router hooks, which we will discuss further –
useHistory
The useHistory will help you for accessing the history instance for navigating purposes. So, now there’s no need to pull out the history from the prop; you can simply use the useHistory hook.
import { useHistory } from "react-router-dom";
const Contact = () => {
const history = useHistory();
return (
About
history.push('/') } >Go to homepage
>
)
};
useParams
The useParam will return an object of URL parameter’s key/value pairs without using the prop.
import { BrowserRouter as Router, Route, Link, Switch, useParams } from "react-router-dom";
export default function App( ) {
const name = 'James Ruso'
return (
Dashboard
About
);
}
const About = ( ) => {
const { name } = useParams( )
return (
// props.match.params.name
{ name !== 'James Ruso' ? : null }
About {name}
)
};
useLocation
The useLocation will return you the current location within the location object.
import { useLocation } from "react-router-dom";
const About = ( ) => {
const { pathname } = useLocation();
return (
About
Here is the Current URL: {pathname}
)h
};
I hope your purpose of landing on this blog post to learn about React router hooks has been served. If you are looking for assistance with React routers to create and navigate between different URLs or need support to manage the transition between views and redirects, then get in touch with us today to embrace the power of React Router with Router Hooks. We have expert ReactJS developers who are well-versed in offering top-of-the-line ReactJS development services.
Last Updated on February 8, 2023