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)的第一个 或者