一. 安装

 yarn add react-router-dom

安装ts依赖

 yarn add --dev @types/react-router-dom

二.

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

需要使用的几个元素，先导入

1. 改成hash模式

这里的BrowserRouter可以改成HashRouter，路由的模式就是hash模式了。不然就会是history模式。因为history只有在有后端服务器，而且可以做到把所有路由都配置到首页，才能使用。但是hash模式什么情况都可以用。hash模式就是url里由#/指示路径的。

export default 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>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

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

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

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

整个代码由Router包起来。Link就相当于Vue里的，点击就跳转到路径的。这个部分是不会变的。

Switch表示切换，不同的路由渲染的不同页面就会在Switch的位置变化。什么path对应什么组件，由Route标签指定，就像路由表一样。

2. 重定向和404

<Redirect exact from='/' to='/money' />
<Route path="*">
    <NoMatch />
</Route>

重定向的写法。下边是404页面。

3. 选中高亮：NavLink标签代替Link标签

Link标签里的东西是点击之后跳转到to属性指示的路由。我想添加一个功能：选中之后高亮，换个颜色。

在Vue里是通过添加一个activeclass的属性做到。在react也类似。

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

添加一个叫做activeClassName的属性，表示如果被选中了（被激活），就有了一个selected类。然后可以通过css添加样式。这里注意还必须使用<NavLink>

4. exact属性-精准匹配

<Route>有一个exact属性，默认是false，表示路由模糊匹配。

设置为true，表示精准匹配。、

<Route exact path="/tags">
        <Tags />
</Route>
<Route exact path="/tags/:tag">
        <Tag />
</Route>

有两个路由。如果我不加exact，就默认模糊匹配。这时我把第二条路由写在下边，当我访问/tags/衣服时，页面并没有跳转。因为从上到下匹配，看到第一条路由，前边满足/tags，就不会看后边了，就直接匹配到了Tags组件。把两个路由调换位置，就可以了。

如果加上exact，表示精准匹配。必须完全是这个路由，才会匹配。这时不管顺序怎样，都会对应上。

5. useHistory

如果想从一个页面回退到上一个页面，可以：window.history.back()

除了这种方法外，还可以使用React Router封装的一个API：useHistory

import useHistory from "react-router-dom";

const history=useHistory()
    const onClickBack=()=>{
        history.goBack()
    }

《React Router》