Ever wondered how can we go to a new page in react js. How do we implement routing in our application? What are the Routes? What is a Route? Do we use <a> tags as we do in html. What is NavLink? How to navigate? What are the benefits of using NavLink instead of the <a> tag? We are going to see all that in this article.

1. What is the purpose of Browser Router in routing?

BrowserRouter is a router implementation that uses the HTML5 history API(pushState, replaceState and the popstate event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components, i.e. Routes, and Route.

BrowserRouter in react is used to wrap up your entire app, containing your Routes, and each specific Route. BrowserRouter is available in ‘react-router-dom.

<BrowserRouter>
      ...
      <Routes>
        <Route path='/' element={<Home/>}/>
        ...
      </Routes>      
</BrowserRouter>

2. What are Routes?

Routes in react js are container for your route. Routes can have as much route as your want.

Syntax of Routes:

<Routes>
    ...
    <Route .../>
    ...
</Routes>

3. What is a Route?

Route in react js is used for rendering out each component, when its path matches the current URL . Each route can only have a single component (page) associated with it.

Syntax of a Route:

<Routes>
     <Route path="/path" element={<path's Component/>}/>
</Routes>

4. How to install react-router-dom?

The react-router-dom package contains bindings for using React Router in web applications.  To add it to your project, you will need to run the following command.

npm i react-router-dom

5. How to import BrowserRouter, Routes and Route in react js?

BrowserRouter, Routes and Route are available in react’s “react-router-dom”. In order to import them, you would need to do the following:

import {BrowserRouter,Route, Routes} from "react-router-dom";

6. What is NavLink for routing in react js?

Just as <a> tag in html helps to navigate to a different page, once you click some button. Likewise, NavLink also provides navigation to a different page. But when we use <a> tag, it refreshes the page. We don’t really want to refresh the page in a react app, we use NavLink instead. It provides navigation to a different page, without refreshing the page.

• How to import NavLink ?

NavLink is also available in ‘react-router-dom’ as:

import { NavLink } from "react-router-dom";

How to use NavLink?

To use the NavLink, you need to provide it the value to its “to” parameter. “To” parameter, allows you to go to your desired URL. You can also add .svg icons, headings with your NavLink.

<NavLink to={"/about"}>
            <h4>About</h4>
</NavLink>

7. Routing final result:

8. Conclusion:

React provides easy to implement Navigation for your app. The use of Routes, Route, and NavLink makes it very easy to implement the navigation structure for the app.

NavLink acts as <a> tags to Navigate. Routes contains routes which capture the button pressed, and activates the specific route, which renders that route’s component.

Finally, we have successfully implemented navigation in our React application using React Router.

---

Complete code is available on github : MShahryiar/React-router: Basic Implementation of react router, using BrowserRouter, Routes and Route. (github.com)