React Router (usage introduction)

React Router is a library for handling routing in React applications. It allows you to define multiple pages in your application and display different content when the URL changes.

To use React Router, you need to install it first:

npm install react-router-dom

Then, introduce the required components and functions into your app:

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch,
  useHistory,
  useLocation,
  Redirect,
  Prompt
} from 'react-router-dom';

Next, you can define your routes. Here's a simple example:

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users/:id">
            <User />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function User() {
  let { id } = useParams();
  return <h2>User: {id}</h2>;
}

In this example:

• We create a Router component to wrap our entire application.
• In the navigation bar, we use the Link component to create buttons that link to different pages.
• Uses the Switch component to render the first child Route component that matches the current URL.
• For each Route component, we specify a path and a component that renders the content of that path.
• When accessing the /users/:id path, we can use the useParams hook to get the parameter value from the URL.

This is just the basic usage of React Router, in fact it provides many other features, such as nested routing, dynamic route matching, etc.

Nested routing

You can create nested routes using the attribute of the Route component. For example:children

function Users() {
  return (
    <div>
      <h1>Users</h1>
      <Switch>
        <Route exact path="/users">
          <AllUsers />
        </Route>
        <Route path="/users/:id">
          <SingleUser />
        </Route>
      </Switch>
    </div>
  );
}

Here, when you visit /users, a list of all users will be displayed; when you visit /users/:id, the information of a single user will be displayed.

Dynamic route matching

React Router allows you to use dynamic parameters in routing paths. These parameters begin with a colon (:), indicating that they accept any string. For example:

<Route path="/users/:id" component={UserProfile} />

In this example, :id is a dynamic parameter. When accessing /users/42 or /users/bob, they will be matched and passed to the UserProfile component.

routing hook

React Router provides a series of useful hooks to help you handle routing-related operations inside the component. For example:

• useParams(): Extract parameter values ​​from URL.
• useRouteMatch()