最近在做的新项目使用的技术栈是 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";
2、Switch
只渲染第一个匹配到的路由组件,Switch下的子节点只能是 Route 或 Redirect 元素。只有与当前访问地址匹配的第一个子节点才会被渲染。
3、Route
Route 主要用于控制路径对应显示的组件,编程式导航三个路由属性是:
exact
:精准匹配,不再向下匹配
path
:标识路由的路径
component
:路径对应显示的组件
4、Link和NavLink
路由导航:NavLink区别在于有一个属性用来显示跳转选中的样式。它具有:
activeStyle
:可以直接写选中的样式activeClassName
:激活时应用的样式名,默认是active
import { Link } from "react-router-dom";
About
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')