react-router 4.0版本学习笔记

时间:2022-01-25 16:56:04

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 获取

react-router 4.0版本学习笔记

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

react-router 4.0版本学习笔记

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匹配的时候,使用的样式

react-router 4.0版本学习笔记