How to Install React-Router and Use It?

React Router is the routing library for React. It is a collection of routing components. It used to navigate the website from one page to another page.

Many latest websites using this SPAs (Single Page Applications) technology, and in this technology, react-router conditionally renders components for all different pages without refreshing the whole page.

Install React-Router

To use react-router, you have to install React-Router with the help of NPM (Node Packages Manager) or Yarn.

Note: If your machine don’t have NPM installed then read article here. In this article I have explained how you can setup enviorment for reactjs application.

Let’s start with install React-Router.

To install it run this command in your terminal.

npm install react-router-dom

It will install the required dependency to use navigate the website. You can check your package.json file. It will show all dependency that you have installed.

Uses of React-Router

Next, you have to create new component file OR can test in your src/App.js file. In this file, import the BrowserRouter, Route, and Switch from react-router-dom.

Let’s understand with examples, how we can use it?

In the example, let’s suppose we have a website and navigation like
Home Services About Contact

These navigation pages handled by the router, and when you click on these links (<Link>) then the router will render the certain component based on the URL (<Route>).

Check the below examples of react-router navigation.

Example #1: Basic Routing

In the above example we used
=> <Router> (refer to <BrowserRouter>)
=> <Link>
=> <Switch>

All Routes will render inside the Router, and <Link> is used for making hyperlinks same as we do with anchor tag (<a>). We can also use this instead of <Link>.

And <Switch> is used for making conditioning between Links and Route and show the certain component based on the requested URL as a result.

This is the basic example of routing navigation with React-Router.

Let’s see another example of Nested Routing:

Example #2: Nested Routing

Nested Routing means navigation has a submenu under the main menu. As we declared above navigation link
Home Services About Contact

But now, suppose the services menu has more menus under this, as called submenu like
Service 1 Service 2 Service 3

So, how we will make this navigation and render the component based on the submenu with parameter ID?

Look at the example for nested routing.

In the above example, we imported 2 more library from react-router-dom.

=> useRouteMatch()
=> useParams()

useRouteMatch hook gives the access to match with the current URL, and get URL property from its object. And useParams used to return the value from URL parameters.

Note: There is more attributes for navigation link like exact, strict, isActiveetc. You can check here.

So, in this article, we learned how to install React-Router and Programmatically navigate using React-Router.

Hope you understand this code. If you have any query please comment out, I’ll help you with that.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

2 Comments

  1. Hi Aman

    I couldn’t make sense of this, but perhaps because I am starting in a different place. I have some code with hrefs eg,,,

    <a href=”#” rel=”nofollow ugc”>read more</a>

    which I need to replace.

    I have installed router-dom and imported Router into my App.js file – but how do I link to the page I want?

    best regards

    Stephen

    1. create a component of your page and export it then use the <Link to=”/page-path”> to derive your page path and use <route></route> for component render.

Leave a Reply

Your email address will not be published. Required fields are marked *