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

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