React Router Tutorial: How to Set Up and Use Client-Side Routing in Your React Application

Routing is an essential concept in web development, allowing users to navigate between different pages or routes within an application. In a React application, routing is typically implemented using a library or framework that provides a way to manage client-side routing. In this article, we’ll explore how to implement routing in a React application using the popular React Router library.

What is React Router?

React Router is a popular JavaScript library for managing client-side routing in React applications. It allows you to define routes for your application and navigate between them using hyperlinks or programmatic navigation. React Router provides a simple and intuitive API that makes it easy to implement routing in your React application.

Step 1: Install React Router

First, create the project using create-react-app:

npx create-react-app routing-app

To get started with React Router, you’ll need to install it as a dependency in your project. Run the following command in your terminal in the root directory of your project:

npm install react-router-dom

Step 2: Add Components

Once React Router is installed, you’ll need to make some components to navigate to.

Create new files named About.js and Contact.js files in your project src directory:

src/About.js

function About() {
    return (
        <div>
            About
        </div>
    );
}

export default About;

src/Contact.js

function Contact() {
    return (
        <div>
            Contact
        </div>
    );
}

export default Contact;

Step 3: Create Routes

Now that the components are done, you’ll need to create routes for your application. In the file index.js, add the following code:

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import App from './App';
import About from './About';
import Contact from './Contact';

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/contact',
    element: <Contact />,
  }
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

In this example, we’ve defined three routes:

• /: The root route, which renders the App component.
• /about: A route that renders the About component.
• /contact: A route that renders the Contact component.

Step 4: Use Link Element

Finally, let’s render the corresponding component for each route with the Link element from React Router. Update your App.js file to look like this:

src/App.js

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

export default function App() {
    return (
        <nav>
            <ul>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul>
        </nav>
    );
}

Each route now maps to a specific component that will be rendered when the route is matched.

Conclusion

That’s it! With these four steps, you’ve successfully implemented routing in your React application using React Router. You can now navigate between different pages or routes using hyperlinks or programmatic navigation.

I hope this tutorial has been helpful in getting you started with implementing routing in your React application. Happy coding!