A Practical Guide to react-router-v6 in react js

Requirements:

To take full advantage of this tutorial, please make sure you have the following installed in your local development environment: Node.js version ❯= 12.x.x installed Access to one package manager such as npm or yarn or npx Basic knowledge of JavaScript, Reactjs, and React Hooks

Version:

React-Router-v6

1npm i react-router-dom@6.2.2

Getting Started:

Single page applications (SPAs) with multiple views need to have a mechanism of routing to navigate between those different views without refreshing the whole web page. This can be handled by using a routing library such as React Router. In this tutorial, let’s take a look at how to create routes using the React Router v6 library. Do note that, at the time of writing this post, React Router v6 is still in beta. This tutorial is going to give you a peek into some of the new features the library is coming out with. If you have experience working with routing in React apps, you may already know that over the past few years Reach Router has gained some attention. However, it is getting merged back into the React Router library starting from version 6. This does mean that the v6 version has a smaller bundle size than its previous versions, one of the major reasons that Reach Router exists.

To create the first route using React Router library, open src/index.js file and add the following import statement:

1import { BrowserRouter as Router } from 'react-router-dom';
2  <BrowserRouter>
3    <App />
4  </BrowserRouter>

After doing that now we have to make components which is likely to be redirected on Link provided by react-router-v6

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

Now we have to create the dashboard.js file:

1import React from "react";
2export default function Dashobard() {
3  return (
4    <>
5      <p>Dashobard </p>
6    </>
7  );
8}

Now we have to create the home.js file

1import React from "react";
2export default function Home() {
3  console.log("ijij");
4  return (
5    <>
6      <p>Home </p>
7    </>
8  );
9}

Now we have to create the About.js file:

1import React from "react";
2export default function About() {
3  return (
4    <>
5      <p>About </p>
6    </>
7  );
8}

We have to create the path for each component which we like to call on specific route file,All we need to setup the Routes tags inside the routes tag ,we have to setup the path ,So whole App.js file look like:

1import "./styles.css";
2import { Routes, Route, Link } from "react-router-dom";
3import Home from "./home";
4import About from "./About";
5import Dashobard from "./Dashboard";
6import Post from "./post";
7import PostLists from "./PostLists";
8import MainPage from "./mainPage";
9
10export default function App() {
11  return (
12    <div className="App">
13      <Routes>
14        <Route path="mainPage/home" element={<Home />} />
15        <Route path="mainPage/about" element={<About />} />
16        <Route path="mainPage/Dashboard" element={<Dashobard />} />
17        <Route path="mainPage" element={<MainPage />} />
18        <Route path="posts" element={<Post />} />
19        <Route path="mainPage/postList" element={<PostLists />} />
20      </Routes>
21      {/* we can switch routes also in that way */}
22      <p>
23        <Link to="postList">Back to post page</Link>
24      </p>
25      <p>
26        <Link to="mainPage">Back to home page</Link>
27        <br />
28      </p>
29      <p></p>
30      <p></p>
31    </div>
32  );
33}

Nesting routes is an important concept to understand. When routes are nested, it is generally assumed that a certain part of a web page remains constant and only the child part of the web page changes.

For example, if you visit a simple blog, the title of the blog is always displayed, then a list of blog posts is displayed beneath it. However, when you click a blog post, the list of blog posts is replaced by the contents or the description of that specific blog post. This is an example that is going to be performed in this section to understand how to handle nested routes in the latest version of the React Router library.
Let make another component which is blogpost.js The code snippet consists of an object called BlogPosts that further consists of different objects as properties. Each object is constituted of three things: a unique slug of a post ,title of that post ,description of that post

1import { Link } from "react-router-dom";
2const BlogPosts = {
3  "1": {
4    title: "First Blog Post",
5    description: "Lorem ipsum dolor sit amet, consectetur adip."
6  },
7  "2": {
8    title: "Second Blog Post",
9    description: "Hello React Router v6"
10  }
11};
12export default function PostLists() {
13  return (
14    <>
15      <ul>
16        {Object.entries(BlogPosts).map(([slug, { title }]) => (
17          <li key={slug}>
18            <Link to={/postList/${slug}}>
19              <h3>{title}</h3>
20            </Link>
21          </li>
22        ))}
23      </ul>
24    </>
25  );
26}

Here is the link of live example which we done so far:
Click here