how to use react router

1React router as a browserRouter in App.js for navbar links like Home,
2services,conatct-us etc.
3   // npm install react-router-dom
4
5// ##### Basic Routing #####
6import React from 'react';
7import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
8
9export default function App() {
10   return (
11      <Router>
12         <div>
13            <nav>
14               <ul>
15                  <li>
16                     <Link to="/">Home</Link>
17                  </li>
18                  <li>
19                     <Link to="/about">About</Link>
20                  </li>
21                  <li>
22                     <Link to="/users">Users</Link>
23                  </li>
24               </ul>
25            </nav>
26
27            {/* A <Switch> looks through its children <Route>s and
28            renders the first one that matches the current URL. */}
29            <Switch>
30               <Route path="/about">
31                  <About />
32               </Route>
33               <Route path="/users">
34                  <Users />
35               </Route>
36               <Route path="/">
37                  <Home />
38               </Route>
39            </Switch>
40         </div>
41      </Router>
42   );
43}
44
45function Home() {
46   return <h2>Home</h2>;
47}
48
49function About() {
50   return <h2>About</h2>;
51}
52
53function Users() {
54   return <h2>Users</h2>;
55}

1npm install react-router-dom
2

1import React from "react";
2import {
3  BrowserRouter as Router,
4  Switch,
5  Route,
6  Link,
7  useRouteMatch,
8  useParams
9} from "react-router-dom";
10
11export default function App() {
12  return (
13    <Router>
14      <div>
15        <ul>
16          <li>
17            <Link to="/">Home</Link>
18          </li>
19          <li>
20            <Link to="/about">About</Link>
21          </li>
22          <li>
23            <Link to="/topics">Topics</Link>
24          </li>
25        </ul>
26
27        <Switch>
28          <Route path="/about">
29            <About />
30          </Route>
31          <Route path="/topics">
32            <Topics />
33          </Route>
34          <Route path="/">
35            <Home />
36          </Route>
37        </Switch>
38      </div>
39    </Router>
40  );
41}
42
43function Home() {
44  return <h2>Home</h2>;
45}
46
47function About() {
48  return <h2>About</h2>;
49}
50
51function Topics() {
52  let match = useRouteMatch();
53
54  return (
55    <div>
56      <h2>Topics</h2>
57
58      <ul>
59        <li>
60          <Link to={`${match.url}/components`}>Components</Link>
61        </li>
62        <li>
63          <Link to={`${match.url}/props-v-state`}>
64            Props v. State
65          </Link>
66        </li>
67      </ul>
68
69      {/* The Topics page has its own <Switch> with more routes
70          that build on the /topics URL path. You can think of the
71          2nd <Route> here as an "index" page for all topics, or
72          the page that is shown when no topic is selected */}
73      <Switch>
74        <Route path={`${match.path}/:topicId`}>
75          <Topic />
76        </Route>
77        <Route path={match.path}>
78          <h3>Please select a topic.</h3>
79        </Route>
80      </Switch>
81    </div>
82  );
83}
84
85function Topic() {
86  let { topicId } = useParams();
87  return <h3>Requested topic ID: {topicId}</h3>;
88}
89