Are you sure you're getting this? Fill in the missing part by typing it in.
React Router is a powerful library for managing navigation in a React application. It allows us to create single-page applications with multiple routes and dynamic rendering.
To use React Router, we need to install it first. We can do this by running the following command:
1$ npm install ___________
To set up routing in our application, we need to wrap our components with a BrowserRouter
component. We can then define route paths and components using the Route
component.
Here's an example of how to use React Router:
1import React from 'react';
2import { BrowserRouter, Route, Link } from 'react-router-dom';
3
4function App() {
5 return (
6 <BrowserRouter>
7 <div>
8 <nav>
9 <ul>
10 <li>
11 <Link to="/">Home</Link>
12 </li>
13 <li>
14 <Link to="/about">About</Link>
15 </li>
16 <li>
17 <Link to="/contact">Contact</Link>
18 </li>
19 </ul>
20 </nav>
21
22 <Route path="/" exact component={Home} />
23 <Route path="/about" component={About} />
24 <Route path="/contact" component={Contact} />
25 </div>
26 </BrowserRouter>
27 );
28}
29
30function Home() {
31 return <h1>Welcome to the Home Page!</h1>;
32}
33
34function About() {
35 return <h1>About Us</h1>;
36}
37
38function Contact() {
39 return <h1>Contact Us</h1>;
40}
41
42export default App;
In the example above, we import the necessary components from react-router-dom
and define three routes: Home, About, and Contact. We also create navigation links using the Link
component.
When the user clicks on a link, the corresponding component will be rendered. The Route
component takes a path
prop that specifies the route path and a component
prop that specifies the component to render.
React Router makes it effortless to create dynamic and interactive single-page applications with smooth navigation. It is a must-learn tool for React developers.
Write the missing line below.