How to create React Router in a ReactJS project in 5 easy steps

React Router is a popular routing library for React applications. It allows you to handle navigation and routing in a declarative way, enabling you to create single-page applications with multiple views.

1. Setting up the Client-side Router

To set up client-side routing using React Router, you can use the react-router-dom package which is used to provide a set of components and utilities for managing client-side routing in your React application.

2. Create a React App

Once the command prompt is open type the following command and press enter

npx create-react-app <project_name>

In case you are working with typescript use the command below and press enter

npx create-react-app@latest --typescript <project_name>

Once the project is completed you will see

3. Open the ReactJS project in your VSC

Once the ReacttJS project is created, move it to the project directory by running the command

cd <project_name>

After that run the below command, it will open your project in the visual studio code.

code .

After that to run the development server, open the visual studio code terminal from the menu or by pressing Ctrl + J, and a terminal will be displayed

Type the following command in the terminal and press enter to run

npm start

Once the command starts running you will see the following line under the command you entered, there will be a link of http://localhost:3000 open that link by clicking on it while pressing Ctrl.

Else You will the following UI

4. Installing & Configuring React Router

First, you need to install React router using

npm install react-router-dom

yarn add react-router-dom

After this, configure it into your React application by importing BrowserRouter, Routes, Route and Link to your App.js file or where you want to create your Navbar.

Once all this is done, you’ve installed and configured react-router-dom, now we need to create our files.

Create a <strong>pages</strong> directory in src directory, and then create 3 file Home.js, About.js and Contact.js.

Open each file and create a component and add some text to it

import React from "react";

function Home() {
  return <div>This is Home Page</div>;
}

export default Home;

Once all the files are created, let’s move to create Routes.

5. Create Routes and Define paths

In the App.js file first, we need to define the Links of our Navbar, these Links define the path that will be triggered once these are clicked, and the path defined in to=”” will be displayed in the browser’s address bar, to create routes use the following code.

Make sure to wrap your Navbar code in a <BrowserRouter>, otherwise, it will throw an error.

App.js

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

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

export default App;

Once the routes are created now, defining paths is much easier, all you need to do is to connect those defined paths to Routes, It will say, to click on the particular Link that you have to display.

App.js

import React from "react";
import { Link, BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HookState from "../class7/useState";
import HookEffect from "../class7/useEffect";
import Parent from "../class8/props";

function Nav() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
      </div>

      <Routes>
        <Route path="/" Component={Parent} />
        <Route path="/about" Component={HookState} />
        <Route path="/contact" Component={HookEffect} />
      </Routes>
    </Router>
  );
}

export default Nav;

When you’re defining Routes make sure to import all the files from the right path such as Import Home from './pages/Home'.

Now check out the output in the browser where your project is running live. You’ll see the same output shown below.

That’s all to create routes in a ReactJS project. I hope it will be a quite useful tutorial to understand how to use React Router, how routes are created as well as how it works.

Also, check out React Component in 5 easy steps. If your want to learn more about ReactJS, you can follow all the ReactJS tutorials starting from “Introduction to React” on devcribe.com. Happy Coding!