React Router简介

1. 安装

npm i -S react-router-dom

2. 路由模式

hash: <HashRouter>
history: <BrowserRouter>

路由模式设置：需放在项目的最顶层

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

3. 路由组件：

匹配不同的URL规则，根据不同的规则展示不同的视图
1）传递props

<Route exact path='/' component={Home} />

path: 当前路由要匹配的规则

匹配规则：

默认情况下，Route 是模糊匹配：url 以当前 path 为开始时则匹配成功

exact 精确匹配：url === path，url === path/ 会匹配成功

strict 严格匹配：url === path。要注意，严格匹配必须基于精确匹配

多路径匹配: 数组

动态路由：url 中某些字段是可变，或者说某些字段对应的是 n 个值

component: 规则匹配成功之后，要显示的视图
2) Route: render
如果 Route 使用的是 component 来指定组件，那么不能使用 props

<Route exact path='/' render={() => <Home items={this.state.items} />} />

render：规则匹配成功之后，要显示的视图
通过 render 属性来指定渲染函数，render 属性值是一个函数，当路由匹配的时候指定该函数进行渲染
3）Link链接组件

<nav>
    <Link to="/">首页</Link>
    <span> | </span>
    <Link to="/about">关于</Link>
    <span> | </span>
    <Link to="/join">加入</Link>
    <span> | </span>
    {/* <a href="/home">首页-2</a>
    <span> | </span> */}
    {/* <Link to="https://www.baidu.com">百度</Link> */}
    <a href="https://www.baidu.com">百度</a>
</nav>

to 链接地址
应用内的链接用 Link 或 NavLink
应用外的链接用 a

4）NavLink组件
NavLink 与 Link 类似，但是会根据浏览器的 url 和 to 属性的path 去进行匹配，如果匹配成功，则定义当前项为默认选中项，它提供了两个特殊属性用来处理页面导航

匹配规则：

默认也是模糊匹配

exact

<nav className="nav">
    <NavLink to="/list/all" isActive={(match, {pathname}) => {
      return match ? true : pathname === "/list"
    }}>全部</NavLink>
    <NavLink to="/list/good">精华</NavLink>
    <NavLink to="/list/share">分享</NavLink>
    <NavLink to="/list/ask">问答</NavLink>
</nav>

activeStyle: 当当前 URL 与 NavLink 中的 to 匹配的时候，激活 activeStyle 中的样式
activeClassName: 与 activeStyle 类似，但是激活的是 className, 选中项的 className 默认为 active

isActive: 默认情况下，匹配的是 URL 与 to 的设置，通过 isActive 可以自定义激活逻辑，isActive 是一个函数，返回布尔值

(match,location)=>{ 判断当前是否应该选中 
    return true 选中，false 不选中
    match：根据 NavLink 匹配规则已经匹配成功则 match 是 match 对象，否则 为 null
    location 当前的url信息
}

5) Switch组件
该组件只会渲染首个被匹配的组件

<Switch>
  <Route path={["/home", "/index"]} exact component={HomeView} />
  <Route path="/list/:type?/:pageNo?" exact component={ListView} />
  <Route path="/404" exact component={UndefinedView} />
  <Redirect from="/" to="/home" exact/>
  <Redirect to="/404" />
</Switch>

6) Redirect组件

<Redirect from="/" to="/home" exact/>

from：来自
to：去向

7) withRouter组件
如果一个组件不是路由绑定组件，那么该组件的 props 中是没有路由相关对象的，虽然我们可以通过传参的方式传入，但是如果结构复杂，这样做会特别的繁琐。幸好，我们可以通过 withRouter 方法来注入路由对象。
withRouter 高阶路由，本质是一个高阶组件，使非路由组件可以获取到路由信息。

高阶组件: 调用一个函数，传入一个组件，并且会返回一个新组件

const NewList = withRouter(List);
export default NewList;

4. 路由参数

当组件被 Route 调用时，会传递给组件一系列的路由信息
1) history:

action: "PUSH" 跳转状态

PUSH: 通过Link 组件或 NavLink 组件进入，也可能是 通过 history 的 push 方法进入
POP: 用户直接输入链接进入
REPLACE：重定向进入， 也可能是 通过 history 的 replace 方法进入

length: 44 当前源在历史记录中，存储的条目数
go: ƒ go(n) 向前或向后跳转历史记录 n 步
goBack: ƒ goBack() 返回历史记录上一步
goForward: ƒ goForward() 前进历史记录下一步
push: ƒ push(path, state)
replace: ƒ replace(path, state)

2) location:

hash: "" url 中的 hash 值
pathname: "" 当前的url
search: "" 当前的 search
state: push 或 repalce 传递过来的信息

3) match: 匹配信息

params -（对象）从与路径的动态段相对应的URL解析的键/值对
isExact -（布尔值）当前 route 是否是精确匹配
path -（字符串）当前的 path
url -（字符串）url 中被path匹配到的部分

5. hooks

useHistory：获取history对象
useLocation：获取location对象
useParams：获取路由参数
useRouteMatch：获取match对象