Routing in React With Examples

In this post we'll get an introduction to routing in Reactjs.

What is routing

You will generally have different web pages for different functionalities and based on events like menu selection, clicking a link user will navigate to these different web pages. Directing users to different web pages based on the requests is done using routing in React.

React Router is the most popular library for routing in react.

React Router

React Router enables "client side routing" in React applications.

In a traditional web application, every request goes to a web server and results in a full page load.

With Client side routing your app updates the URL (for example change from http://example.com/home to http://example.com/about), based on an event like link click, without making another request for another document from the server. Rendering is done locally by the Java script. In a Single Page Application you will get a single page and the page is updated dynamically by injecting the contents from components.

Installing React router

You can install React router by using the following npm or yarn command.

npm install react-router-dom

yarn add react-router-dom

In React Router module there are following three packages-

react-router- The react-router package is the heart of React Router and provides all the core functionality for both react-router-dom and react-router-native.
react-router-dom- The react-router-dom package contains bindings for using React Router in web applications.
react-router-native- The react-router-native package contains bindings for using React Router in React Native applications.

Since we are going to use React router in a web application so we need react-router-dom package.

React routing example using React Router

As per the newest version of React Router recommended way of defining routes is to use createBrowserRouter and to make you application aware of the routes use <RouterProvider>.

createBrowserRouter- This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack. Routes are created as an array of objects using createBrowserRouter method of the react-router-dom module.

RouterProvider - All data router objects are passed to this component to render your app. Using the router prop you will pass the router definitions to this component.

In the example we'll have two components Home and About which are to be rendered using routing.

1. Route definition

src\components\Routes\route.js

import { createBrowserRouter } from "react-router-dom";
import About from "./about";
import Home from "./home";
export const router = createBrowserRouter([
    {path: "/", element: <Home /> },
    {path: "/about", element: <About />}
])

The createBrowserRouter method receives an array of objects where each array element defines a route i.e., which components is to be rendered for which path.

As per the route definition in this example, Home component will be rendered for the root ("/") path. About component will be rendered for the "about" path.

2. Providing the routes

Provide the route definition to your application using the <RouteProvider> component. RouteProvider component has the router prop that’s where you need to provide the route definition created using createBrowserRouter method.

src\App.js

import { RouterProvider } from 'react-router-dom';
import { router } from './components/Routes/route';

function App() {
    return <RouterProvider router={router}></RouterProvider>
}

export default App;

3. Write the components

Here are the components that are rendered by the app.

src\components\Routes\home.js

const Home = () => {
    return <h2>This is home page</h2>
}

export default Home;

src\components\Routes\about.js

const About = () => {
    return <h2>This is a router demo</h2>
}

export default About;

Now if you access the root path by accessing http://localhost:3000/

If you change the path to http://localhost:3000/about

Check out how to create a navigation menu using <Link> element in React in this post- React Router - Link in react-router-dom

That's all for the topic Routing in React With Examples. If something is missing or you have something to share about the topic please write a comment.

You may also like

KnpCode

October 3, 2023