Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
8.4: React Router
1
import React from "react";
2
import {
3
BrowserRouter as Router,
4
Switch,
5
Route,
6
Link
7
} from "react-router-dom";
8
​
9
export 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
​
45
function Home() {
46
return <h2>Home</h2>;
47
}
48
​
49
function About() {
50
return <h2>About</h2>;
51
}
52
​
53
function Users() {
54
return <h2>Users</h2>;
55
}
Copied!
Last modified 2mo ago
Copy link