react-router 4.0版本学习笔记

Router

所有路由组件的底层接口，一般情况都不使用，而是使用更加高级的路由。

最常用的有两种<BrowserRouter>、<HashRouter>

<BrowserRouter>: 使用H5提供的history API来保持UI和URL同步。这个路由会对后台获取真实的url地址造成影响。

<HashRouter>: 使用URL的hash来保持UI和URL同步。拥有不同风格的hash来划分url和react路由地址。

Route

匹配url地址，渲染相应的组件。

参数 exact: 当值为true时，则要求路径与location.pathname必须完全匹配；

参数 strict: 当设为true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname，这个值并不会对location.pathname中有其他的片段有影响;

match(路由参数)

params: 通过解析URL地址当中动态获取的参数

isExact: 当值为true的时候，整个URL地址都需要匹配

path: 匹配的路径格式

url: URL匹配的部分

获取：

在组件当中 this.props.match 获取

render和children   通过 ({match}) = > {}

location(路由参数)

pathname: 即将前往的路径

history(路由参数)

length: 堆栈数量

action: 当前动作，push、pop、replace, 前往、后台，替代

location: URL 路径 => pathname: URL路径;  search: 查询字符串； hash: URL的hash分段；

方法：

push() 在路由堆栈当中新增条目

replace() 堆栈当中的当前条目

go() 将堆栈向前/后推

goBack() => go(-1);

goForward() => go(1);

block() = > 阻止跳转

<Link > : 进行路径跳转

to: 需要跳转的路径

replace: 当他为true时，路由变换会替换当前的路由

<NavLink>: 是link的一个特定版本，可以添加样式参数

activeClassName: 当与当前url匹配的时候，使用的类名

activeStyle: 当与当前url匹配的时候，使用的样式