关于react-router-dom的一些记录

最近在做的新项目使用的技术栈是 React+AntDesign，本篇主要记录在实践过程中使用react-router-dom时遇到的一些方法的总结。

1、HashRouter和BrowserRouter

react-router-dom依赖于react-router，主要用于浏览器环境下的开发。它的路由基本有2个路由容器即HashRouter和BrowserRouter，HashRouter使用的是hashchange的方法，浏览的url中包含#，BrowserRouter使用的原理是H5的history API来使url发生改变。本文主要以HashRouter为例。

import { HashRouter as Router, Route, Switch } from "react-router-dom";

import Join from "./Join";
import Success from "./Success";
import Login from "../Login";
import Home from "../Home";

<Router>
     <Switch>
        <Route exact path='/join' component={Join} />
        <Route exact path='/success' component={Success} />
	<Route exact path='/login' component={Login} />
        <Home />
     </Switch>
</Router>

2、Switch

只渲染第一个匹配到的路由组件,Switch下的子节点只能是 Route 或 Redirect 元素。只有与当前访问地址匹配的第一个子节点才会被渲染。

3、Route

Route 主要用于控制路径对应显示的组件，编程式导航三个路由属性是：

exact：精准匹配，不再向下匹配

path：标识路由的路径

component：路径对应显示的组件

4、Link和NavLink

路由导航：NavLink区别在于有一个属性用来显示跳转选中的样式。它具有：

• activeStyle：可以直接写选中的样式
• activeClassName：激活时应用的样式名，默认是active

import { Link } from "react-router-dom";
<Link to="/about">About</Link>

• to：链接到的路径或位置
• replace：替换路径

5、withRouter

withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。

无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息。

主要用于子组件。

6、match

用于获取路由的参数信息

console.log(this.props.match.params.id)

• params：object 路径参数，通过解析 URL 中的动态部分获得键值对
• isExact：为 true 时，整个 URL 都需要匹配
• path：用来匹配的路径模式
• url： 匹配的链接

7、location

用来存放当前的路径的信息

const { pathname } = this.props.location;

• pathname：url路径
• search：查询字符串
• hash：hash

8、history

可以用来手动跳转到页面

this.props.history.push('/user/list')