Mark As Completed Discussion

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:

SNIPPET
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:

SNIPPET
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.