react-router基本知识

相关链接

react-router

示例网站

作用

让浏览器历史记录功能可用，包括前进后退功能

管理组件的加载

这点用在菜单功能特别好使

原理

使用h5的history接口，来保持ui和url同步

安装

cnpm install react-router-dom

导入

import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'

api

BrowserRouter

路由定义外层配置，配置基本规则

属性

(1) basename

基目录，以/开头，结尾无/

(2) getUserConfirmation

–(略)

(3) forceRefresh

为 true 时，在导航的过程中整个页面将会刷新。（浏览器不支持 HTML5 的 history API 时使用）

(4) keyLength

hashRouter

HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步。

Link

用来定义导航

<Link></Link>

属性

(1) to

指定点击后跳转到（显示）的路径(string)或是地址(object)

//路径
<Link to="/courses"/>

//地址
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>

(2) replace

是否替换源地址（不算一个历史记录），默认false

<Link to="/courses" replace />

NavLink

会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数

MemoryRouter

在内存保存你 “URL” 的历史纪录(并没有对地址栏读写). 在非浏览器或者测试环境比如React Native下很有用

Redirect

渲染的时候将会导航到一个新的地址（location）。这个新的地址（location）将会覆盖在访问历史记录里面的原地址

Route

当location（url）匹配path属性时，渲染指定的组件。

使用有三种渲染内容的方法：

1 component

地址匹配的时候React的组件会被渲染

<Route path="/user/:username" component={User}/>

const User = ({ match }) => {
return <h1>Hello {match.params.username}!</h1>
}

2 render

内联渲染或包装组件

//行内渲染
<Route path="/home" render={() => <div>Home</div>}/>

3 children

不管地址是否匹配都渲染

属性

(1) path

路径，无则总是匹配

(2) exact

当值为true时，则要求路径与location.pathname必须 完全 匹配。

<Route exact path="/one" component={About}/>

(3) strict

严格检查 / 结尾

<Route strict path="/one/" component={About}/>

Router

Router是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口

StaticRouter

从不会改变地址

Switch

渲染匹配地址(location)的第一个 或者