How to Create Routes using React Router v6 in React 18

Last Updated on by in React JS

React Router is a powerful navigation library that helps in managing different views of React application. With its latest version, v6 brings simplicity and flexibility to route handling.

In this guide, we will show you how to implement routing in React using React Router library, how to create simple routes that helps you mange the view of your React application.

In the context of frontend development, a “route” refers to a predefined URL endpoint within a web application. Routes are used to determine what content or components should be visible on the screen when a specific URL is accessed or navigated to by a user.

If you are a beginner, and trouble having creating routes within React environment, then stick around we will show you the step-by-step process to create routes in React with React router library.

Here is the video tutorial of this guide, make sure to checkout and support by subscribing.

Build New Application

Run the following command to install a new React app.

npx create-react-app react-demo

Move into the project folder.

cd react-demo

Create Functional Components

Create components/ folder inside the src/ folder.

Next, create the components/Home.js file.

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Next create the components/Profile.js file.

import React from 'react'

function Profile() {
  return (
    <div>Profile</div>
  )
}

export default Profile

Create components/Contact.js file, insert the given code.

import React from 'react'

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

export default Contact

Set Up React Router Dom

In order to use react router in React, install the router package using the given command.

npm i react-router-dom --legacy-peer-deps

Create Navigation Routes

In this step, we will first open the components folder and create the Nav.js file.

Make sure to place the following code into the file.

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import Profile from "./Profile";
import Contact from "./Contact";

const Nav = () => {
  return (
    <div>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
};

export default Nav;

Handle Routes with React Router

Head over to App.js file, here you have to add the given code.

Make sure to import the Nav module and the Link component as suggested by the following code example.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import { Link } from "react-router-dom";
import Nav from "./components/Nav";

const App = () => {
  return (
    <div className="container">
      <h2>React Configure Base Path Example</h2>
      <div className="mb-5">
        <Link className="nav-link link-danger" to="/">
          Home
        </Link>
        <Link className="nav-link link-danger" to="profile">
          Profile
        </Link>
        <Link className="nav-link link-danger" to="contact">
          Contact
        </Link>
      </div>
      <div>
        <h3>
          <Nav />
        </h3>
      </div>
    </div>
  );
};

export default App;

Register Routes with BrowserRouter API

Open the index.js file, here you have to import the BrowserRouter API and make sure to put the given code as shown below.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <BrowserRouter basename="/positronx">
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Run App on Browser

We can execute the command to start the React application server.

npm start

You have to use the given url to access the app.

http://localhost:3000/positronx

How to Create Routes using React Router v6 in React 18

Conclusion

React Router is an essential library for handling routing in React front-end applications.

It helps you implement and manage the various routes and views in React SPA (single-page web application).

Using React Router library, we can quite easily create a navigation system that helps users to navigate between different section of React application without refreshing web page reload.

So far, we have learned how to handle routing in React. This tutorial aimed to empower your skills about the React Router in React.

Hope, we shared the proper knowledge of Routing in React.

To know more about routing features, checkout the official documentation of React Router.