browser react

1import React from "react";
2import {
3  BrowserRouter as Router,
4  Switch,
5  Route,
6  Link
7} 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}
56

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