How to do modern routing with react-router-dom

In React, routers help create and navigate between the different URLs that make up your web application. They allow your user to move between the components of your app while preserving user state, and can provide unique URLs for these components to make them more shareable. With routers, you can improve your app’s user experience by simplifying site navigation.

Installation

You can install React Router from the public npm registry with either npm or yarn.

1
2    npm i react-router-dom or yarn add react-router-dom
3    

In order to do routing First we have to make the following Component (dashboard,seeting,SidenavBar,TopnavBar)

1import React from "react";
2export default function Dashboard(props) {
3  return (
4    <div>
5      <h1> hjfjhfhgfhgfdhgfhgfhgf</h1>
6    </div>
7  );
8}

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