1// Let's start with a simple example
2
3// First, let's install React Router using npm
4
5// Open your terminal and run this command:
6
7// npm install react-router-dom
8
9// React Router is divided into three packages - react-router, react-router-dom, and react-router-native.
10
11// For web applications, we'll be using react-router-dom.
12
13// Next, let's import the necessary components from react-router-dom
14
15// In your JavaScript file, add the following import statements:
16
17import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
18
19// The `Router` component is the root component that wraps around your application. It provides the routing functionality.
20
21// The `Route` component is used to define a route.
22
23// The `Link` component is used to create links to different routes in your application.
24
25// Here's an example of how to use these components:
26
27<Router>
28  <div>
29    <nav>
30      <ul>
31        <li>
32          <Link to="/">Home</Link>
33        </li>
34        <li>
35          <Link to="/about">About</Link>
36        </li>
37        <li>
38          <Link to="/contact">Contact</Link>
39        </li>
40      </ul>
41    </nav>
42
43    <Route path="/" exact component={Home} />
44    <Route path="/about" component={About} />
45    <Route path="/contact" component={Contact} />
46  </div>
47</Router>
48
49// In this example, we have defined three routes - Home, About, and Contact.
50
51// The `exact` prop on the Home route is used to specify that the route should only be matched if the current URL is an exact match.
52
53// To create a component for each route, you can use functional components or class components.
54
55// Here's an example of how to define the Home, About, and Contact components:
56
57const Home = () => {
58  return (
59    <div>
60      <h2>Home</h2>
61      <p>Welcome to the Home page!</p>
62    </div>
63  );
64};
65
66const About = () => {
67  return (
68    <div>
69      <h2>About</h2>
70      <p>Welcome to the About page!</p>
71    </div>
72  );
73};
74
75const Contact = () => {
76  return (
77    <div>
78      <h2>Contact</h2>
79      <p>Welcome to the Contact page!</p>
80    </div>
81  );
82};