The major components

React Router components fall into three categories:

• Routing, like<BrowserRouter>and<HashRouter>
• Routing matchers, for example<Route>and<Switch>
• Navigation, for example<Link>.<NavLink>and<Redirect>We also like to think of the navigation component as “routed navigation.”

When you use it in your React app, you should import all the components you want to use in your Web application from the React-router-DOM.

import { BrowserRouter, Route, Link } from "react-router-dom";
Copy the code

Routers

At the heart of every React Router application is the Router Component. For Web projects, react-router-dom provides both

and

routers. The main difference between the two is how they store urls and communicate with the Web server.

• <BrowserRouter>Use the regular URL path. These are usually the simplest urls, but they require an exact match to the URL on the server. Specifically, your Web server needs to be in all of theReact RouterProvides the same page at the URL managed on.Create React AppThis is supported in development itself, along with instructions on how to configure the production server.
• <HashRouter>Puts the current page location in the hash part of the URL so that the URL looks likehttp://example.com/#/your/page. Since hashes are never sent to the server, this means that no special server configuration is required.

To use the router, just make sure it is rendered under the root of the element hierarchy. Typically, you wrap the top-level

elements in your router, as follows:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>.document.getElementById("root"));Copy the code

Route Matchers

There are two types of routing matching components: Switch and Route. When

is rendered, it searches for sub-< Route> and finds a component whose path of Route matches the current URL. When a match is found, it renders the

and ignores all other objects. This means that you sort your

order by the use of your path.

If there is no

match,

will render no components (NULL).

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

function App() {
  return (
    <div>
      <Switch>{/* If the current URL is/about, this route is rendered and the rest is ignored */}<Route path="/about">
          <About />
        </Route>{/* Notice how these two routes are sorted. More detailed path = "/contact/:id" before path = "/contact", so when matching this route, will be displayed<Contact>* /}<Route path="/contact/:id">
          <Contact />
        </Route>
        <Route path="/contact">
          <AllContacts />
        </Route>{/* This route can be used as a backup if none of the previous routes provide anything. Important: routes with path = "/" will always match urls, because all urls begin with a /. So why do we put this last */}<Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  );
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);
Copy the code

The important thing to note is that

matches the beginning of the Route URL, not the entire URL. Therefore,

will always match the URL. Therefore, we usually place

with path value/at the end of

. Another solution is to use

to match the entire URL.

Note: Although the React Router does not support

element rendering outside of

, as version 5.1, we recommend you use useRouteMatch Hook instead. In addition, we do not recommend that you render

without path, but rather that you use hook to access any variables you need.

Navigation (Navigation/route modifier)

React Router provides a component for creating links in your application. Wherever you render () renders anchors in the HTML document.

<Link to="/">Home</Link>
// <a href="/">Home</a>
Copy the code

is a special type of that can be dynamically matched by the location of a URL.

<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// When the URL is /react, it will render:
// <a href="/react" className="hurray">React</a>

// When other cases will render:
// <a href="/react">React</a>
Copy the code

Use the

whenever you want to force navigation. When the

is rendered, it navigates to the page under its to property.

<Redirect to="/login" />
Copy the code