React Router

React Router is a powerful routing library for React applications that allows you to create dynamically changing URLs and navigate between different pages.

With React Router, you can define routes and associate them with components. When the URL changes, React Router will render the appropriate component based on the current route.

Here's an example of how to use React Router in a React application:

1import React from 'react';
2import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
3
4function Home() {
5  return (
6    <div>
7      <h1>Home Page</h1>
8      <p>Welcome to the Home Page!</p>
9    </div>
10  );
11}
12
13function About() {
14  return (
15    <div>
16      <h1>About Page</h1>
17      <p>This is the About Page.</p>
18    </div>
19  );
20}
21
22function App() {
23  return (
24    <Router>
25      <nav>
26        <ul>
27          <li>
28            <Link to='/'>Home</Link>
29          </li>
30          <li>
31            <Link to='/about'>About</Link>
32          </li>
33        </ul>
34      </nav>
35
36      <Route path='/' exact component={Home} />
37      <Route path='/about' component={About} />
38    </Router>
39  );
40}
41
42export default App;

In this example, we define two components: Home and About. We wrap our entire application in the Router component and use the Route component to define the routes.

We also use the Link component to create links to different routes. When a link is clicked, React Router will update the URL and render the corresponding component.

React Router is a powerful tool that enables you to create complex navigation flows in your React applications. Whether you need simple navigation between pages or more advanced features like nested routes or URL parameters, React Router has you covered.

xxxxxxxxxx

export default App;

import React from 'react';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

​

function Home() {

  return (

    <div>

      <h1>Home Page</h1>

      <p>Welcome to the Home Page!</p>

    </div>

  );

}

​

function About() {

  return (

    <div>

      <h1>About Page</h1>

      <p>This is the About Page.</p>

    </div>

  );

}

​

function App() {

  return (

    <Router>

      <nav>

        <ul>

          <li>

            <Link to='/'>Home</Link>

          </li>