主要组件

React Router中的组件主要分为三类：

• 路由，像<BrowserRouter>和<HashRouter>
• 路由匹配器，例如<Route>和<Switch>
• 导航，比如<Link>，<NavLink>和<Redirect>，我们还喜欢将导航组件视为“路由导航”。

您在您的React app中使用时，您应该从react-router-dom中导入Web应用程序中所要使用的所有组件。

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

Routers

每个React Router应用程序的核心都是Router Component。对于Web项目，react-router-dom提供<BrowserRouter>和<HashRouter>两种router。两者之间的主要区别是它们存储URL和与Web服务器通信的方式。

• <BrowserRouter>使用常规的URL路径。这些通常是最简单的的URL，但是它们要求和服务器端的URL地址完全匹配。具体来说，您的Web服务器需要在所有由React Router上管理的URL上提供相同的页面。Create React App在开发中自身便是支持此功能的，并附带有关如何配置生产服务器的说明。
• <HashRouter>将当前页面位置放置在URL的hash部分中，因此URL看起来像http://example.com/#/your/page。由于哈希从不发送到服务器，因此这意味着不需要特殊的服务器配置。

要使用路由器，只需确保将其呈现在元素层次结构的根目录下即可。通常，您会将顶级<App>元素包装在路由器中，如下所示：

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")
);

Route Matchers(路由匹配器)

有两种路由匹配组件：Switch和Route。当<Switch>被渲染，它会搜索子<Route>并找到一个Route的path和当前的URL匹配的组件。当找到一个匹配项时，它将渲染该<Route>并忽略其他所有对象。这意味着您依据您的path的使用情况来排列您的<Route>顺序。

如果没有<Route>匹配项，则<Switch>将不会渲染任何组件（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>
        {/*
          如果当前URL是/ about，则呈现此路由,而其余的则被忽略
        */}
        <Route path="/about">
          <About />
        </Route>

        {/* 请注意这两种路线的排序方式。 更详细的path =“ /contact/:id”在path =“/contact”之前，因此匹配此路由时时，将呈现<Contact> */}
        <Route path="/contact/:id">
          <Contact />
        </Route>
        <Route path="/contact">
          <AllContacts />
        </Route>

        {/* 如果先前的路由均未提供任何内容，此路线可作为后备路线。
            重要提示：路径=“ /”的路线将始终匹配URL，因为所有URL均以/开头。
            所以为什么我们把这个放在最后 */}
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  );
}

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

需要注意的重要一件事是<Route path>匹配路由URL的开头，而不是整个URL。因此，<Route path="/">将始终URL匹配。因此，我们通常将path值为/的<Route>放到<Switch>的最后。另一种解决方案是使用来匹配整个URL。

注：虽然React Router不支持元素渲染在外，作为5.1版本，我们推荐您使用的useRouteMatch hook来代替。此外，我们不建议您渲染不带的path的<Route>，而建议您使用hook来访问所需的任何变量。

Navigation (导航/路由修改器)

React Router提供了一个<Link>在您的应用程序中创建链接的组件。无论您在何处呈现<Link>（<a>）都会在HTML文档中呈现锚点。

<Link to="/">Home</Link>
// <a href="/">Home</a>

<NavLink>是一种特殊类型的<Link>,可以通过URL的location动态进行匹配。

<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// 当URL为/react,将会渲染:
// <a href="/react" className="hurray">React</a>

// 当是其他情况将渲染:
// <a href="/react">React</a>

每当您要强制导航时，都可以使用。当被渲染，它将导航到它的to属性下的页面。

<Redirect to="/login" />