什么是React Router

许多现代网站实际上是由一个页面组成的，它们看起来就像多个页面，因为它们包含呈现为单独页面的组件。 这些通常称为SPA-单页应用程序。 从根本上说，React Router的作用是根据URL中使用的路由（在首页中为/，在About页面中为/ about等），有条件地渲染某些组件以进行显示。
例如我们可以通过React Router将 www.myurl.com/ 与 www.myurl.com/about 或者 www.myurl.com/shop 链接起来。
那怎么做到这些呢？先看下React Router的基本组件：

React Router 组件

现在的React Router版本中已不需要路由配置，现在一切皆组件。

ReactRouter中提供了以下三大组件：

• Router是所有路由组件共用的底层接口组件，它是路由规则制定的最外层的容器。
• Route路由规则匹配，并显示当前的规则对应的组件。
• Link路由跳转的组件

当然每个组件下又会有几种不同的子类组件实现。比如： Router组件就针对不同功能和平台对应用：

• <BrowserRouter> 浏览器的路由组件
• <HashRouter> URL格式为Hash路由组件
• <MemoryRouter> 内存路由组件
• <NativeRouter> Native的路由组件
• <StaticRouter> 地址不改变的静态路由组件

React Router 设计

1. 安装包

npm install react-router-dom

2. 创建router, 参考官方例子
   在App.js 中放入以下代码

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

// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
// Although the page does not ever refresh, notice how
// React Router keeps the URL up to date as you navigate
// through the site. This preserves the browser history,
// making sure things like the back button and bookmarks
// work properly.

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

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

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

运行出来后的页面如下：

image.png

点击about 跳转到/about 页面，如下

image.png

React Router 主要组件

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

• 路由器，例如<BrowserRouter>和<HashRouter>
• 路由匹配器，例如<Route>和<Switch>
• 导航，例如<Link>，<NavLink>和<Redirect>

将导航组件视为“路线更改器”，在Web应用程序中使用的所有组件都应从react-router-dom导入。

Routers

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

• <BrowserRouter>使用常规URL路径。 这些通常是外观最好的URL，但是它们要求正确配置服务器。 具体来说，Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面。 Create React App在开发中即开即用地支持此功能，并附带有关如何配置生产服务器的说明。
• <HashRouter>将当前位置存储在URL的哈希部分中，因此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

有两个router matcher: Switch和Route。如果使用了 <Switch>，它将搜索其子<Route>元素，以查找其路径与当前URL匹配的元素。 当找到一个时，它将渲染该<Route>并忽略所有其他路由。 这意味着应将有比较具体path匹配规则的<Route>放置在比较模糊匹配规则的<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>
        {/* If the current URL is /about, this route is rendered
            while the rest are ignored */}
        <Route path="/about">
          <About />
        </Route>

        {/* Note how these two routes are ordered. The more specific
            path="/contact/:id" comes before path="/contact" so that
            route will render when viewing an individual contact */}
        <Route path="/contact/:id">
          <Contact />
        </Route>
        <Route path="/contact">
          <AllContacts />
        </Route>

        {/* If none of the previous routes render anything,
            this route acts as a fallback.

            Important: A route with path="/" will *always* match
            the URL because all URLs begin with a /. So that's
            why we put this one last of all */}
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  );
}

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

需要注意的是<Route path>匹配URL的开头，而不是整个开头。 因此，<Route path =“ /”>将始终与URL匹配。 因此，我们通常将此<Route>放在<Switch>的最后。 另一种可能的解决方案是使用匹配整个URL的 <Route exact path="/">。注意：尽管React Router确实支持在<Switch>之外渲染<Route>元素，但从5.1版本开始，我们建议使用useRouteMatch hook代替。 此外，我们不建议呈现不带路径的<Route>，而是建议使用hook来访问所需的任何变量。

Navigation (or Route Changers)

React Router提供了一个<Link>组件来在应用程序中创建链接。 无论在何处render<Link>，都会在HTML文档中渲染anchor(<a>)
<NavLink>是<Link>的一种特殊类型，当其prop与当前位置匹配时，可以将其自身设置为“active”。

<Link to="/">Home</Link>
// <a href="/">Home</a>
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>

// When the URL is /react, this renders:
// <a href="/react" className="hurray">React</a>

// When it's something else:
// <a href="/react">React</a>
<Redirect to="/login" />

任何时候要强制navigation，都可以使用<Redirect>。 声依永<Redirect>时，它将使用其 to prop进行导航。

参考

• React Router 教程
• Learn React Router in 5 Minutes - A Beginner's Tutorial
• React Router 官方文档