Hello Everyone, in this blog I'll explain what is routing, and how to get started with React Router v6.

What is Routing?

In React, routers help to create and navigate between the different URLs that make up your web application. They allow your user to move between your app's components and preserve the user's state.

About React Router

React Router is the widely used Router when it comes to routing, but there is another Router called Reach Router which is a lightweight and forked version of React Router that focuses on accessibility.

React Router v6 is the combination of Reach Router and the previous version of React Router i.e v5. At the time of writing, React Router v6 is still in the beta phase, but it has a lot of features that we will be discussing further.

Getting Started

This blog will cover a few of the main concepts related to React Router v6.

1. Installation
2. Elements of React Router v6
3. Basic Routing

1. Installation

Run the following command to get React Router v6 and related packages.

npm install react-router@next react-router-dom@next

Once you are done, and when you will use the Router you will get an error something like this npm start: ./node_modules/react-router/index.js Module not found: Can't resolve 'history' in, for that you need to run following command, if you are not facing any error you don't need to run the following command.

npm install history

2. Elements Of React Router v6

Here are some of the components we need to import from the react-router-dom package before starting to create basic routing.

a. BrowserRouter

To create the basic route using React Router v6, open src/index.js or any specific page which needs routing. Basically, it is imported on a global level goes by the following import statement.

import { BrowserRouter as Router } from 'react-router-dom';

Here we are just giving an alias by calling it Router you can directly call BrowserRouter as below.

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

This component is imported from react-router and it's the global package that is used to wrap different routes inside it. It uses HTML5 History API for routing.

b. Routes

The next thing which needs to import from the react-router package is the main Routes Component which acts as a container that wraps all our routes inside it. It includes relative routing and linking, route matching, etc.

import { Routes } from 'react-router'

It's just a naming upgrade from the previous versions (i.e v5) it was called Switch

c. Route

The last component which we need to import is the Route component from the react-router package. It is responsible for rendering the UI of a React component.

import { Route } from 'react-router';

It has a prop called path which always matches the current URL of the application. The second required prop is called element that tells the Route component when a current URL is triggered then which React component to be rendered.

Adding all together

Let's imports everything which we learned till now, Here is the Codesandbox link for reference

src/index.js.

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";

/* Imported global package and added above our main App Component*/
import { BrowserRouter } from "react-router-dom";  

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
  rootElement
);

src/App.jsx

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

export default function App() {
  return (
    <div className="App">
      <h1>Learning React Router v6</h1>
    </div>
  );
}

Now we are done with the installation and initial setup. Let's start with the basic routing.

3. Basic Routing

For basic routing, we will be creating three different components called About, Login, Register and see how to implement that using Router.

After creating components we will export that in our main App. jsx file and also add Routes to it, so our file will look like this.

import { Route, Routes } from "react-router";
import { About } from "./About";
import { Login } from "./Login";
import { Register } from "./Register";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
/* Added Routes and individual Routes as well */
/* Here path is on which URL a particular component to be rendered */
      <Routes>
        <Route path="about" element={<About />}></Route>
        <Route path="login" element={<Login />}></Route>
        <Route path="register" element={<Register />}></Route>
      </Routes>
    </div>
  );
}

a. Link Component

If we want to navigate to a particular page in HTML we use anchor <a> tag, like this.

<a href="login">Login</a>

But by following the above approach React app goes under refreshing the particular page which we don't want. To avoid refreshing the online pages, the react-router-dom library provides the Link component.

Let’s add the Link component from the react-router-dom package.

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

After importing we need to provide the path where we want to redirect when we perform a particular action, i.e If we want to go login page then we need to specify the path to the Link Component.

<Link to="/login">Login</Link>

So After importing all the components, our App.jsx file will look like this, and now we can easily change our route and can redirect to a different page, Here is the codesandbox link for the same

import { Route, Routes } from "react-router";
import { Link } from "react-router-dom";
import { About } from "./About";
import { Login } from "./Login";
import { Register } from "./Register";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Link to="/about">
        About
      </Link>
      <Link to="/login" >
        Login
      </Link>
      <Link to="/register">
        Register
      </Link>

      <Routes>
        <Route path="about" element={<About />}></Route>
        <Route path="login" element={<Login />}></Route>
        <Route path="register" element={<Register />}></Route>
      </Routes>
    </div>
  );
}

There are many more concepts other than the above-mentioned concepts, which one needs to understand for that, I'm sharing some good resources to learn more about React Router v6 in depth.

1. React Router v6
2. Official Github Repository

I hope you liked this article. Thanks for reading!!! Have a great day, Bye, Good Luck