引用
react-router 还是 react-router-dom?
只需引用 react-router-dom 这个包就行了。当然，如果搭配 redux ，你还需要使用 react-router-redux。
组件
<BrowserRouter>
一个使用了HTML5 history API的高阶路由组件,保证你的ui界面和url保持同步
组件属性:
- basename: string
作用：为所有位置添加一个基准URL
使用场景：假如你需要把页面部署到服务器的二级目录，你可以使用 basename 设置到此目录。
<BroserRouter basename='/minooo' />
<Link to='/react' /> // 渲染成 <a href="/minooo/react" />
- getUserConfirmation: func
作用：导航到此页面前执行的函数，默认使用 window.confirm
使用场景：当需要用户进入页面前执行什么操作时可用，不过一般用到的不多 - forceRefresh: bool
作用：当浏览器不支持 HTML5 的 history API 时强制刷新页面。
使用场景：同上。
const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory} />
-keyLength: number
作用：设置它里面路由的 location.key 的长度。默认是6。（key的作用：点击同一个链接时，每次该路由下的 location.key都会改变，可以通过 key 的变化来刷新页面。）
使用场景：按需设置。
<BrowserRouter keyLength={12} />
- children: node
作用：渲染唯一子元素。
使用场景：作为一个 Reac t组件，天生自带 children 属性。
<HashRouter>
Hash history 不支持 location.key 和 location.state。另外由于该技术只是用来支持旧版浏览器，因此更推荐大家使用 BrowserRouter，此API不再作多余介绍。
<Route>
基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。
<Route> 自带三个 render method 和三个 props
render methods 分别是：
- <Route component>
- <Route render>
- <Route children>
每种 render method 都有不同的应用场景，同一个<Route> 应该只使用一种 render method ，大部分情况下你将使用 component
props 分别是 - math
- location
- histroy
所有的 render method 无一例外都将被传入这些 props。 - exact: bool
如果为 true，path 为 '/one' 的路由将不能匹配 '/one/two'，反之，亦然。 - strict: bool
对路径末尾斜杠的匹配。如果为 true。path 为 '/one/' 将不能匹配 '/one' 但可以匹配 '/one/two'。
<Link>
to: string
to: Object
replace: bool
<NavLink>
是<Link>的特殊版,为页面导航准备用的
- activeClassName: string
导航选中激活时候应用的样式名,默认为active - activeStyle: object
不用class直接写style - exact : bool
若为true,只有当访问地址严格匹配时激活样式才会应用 - strict : bool
若为true,只有当访问地址后缀斜杠严格匹配（有或无）时激活样式才会应用 - isActive: func
决定导航是否激活，或者在导航激活时候做点别的事情。不管怎样，它不能决定对应页面是否可以渲染
<Switch>
只渲染出第一个与当前访问地址匹配的<Route>或<Redirect>
<Switch>
// 这里每次只匹配一个路由
<Route />
<Route/>
</Switch>
- children: node
<Switch> 下的子节点只能是 <Route> 或 <Redirect> 元素。只有与当前访问地址匹配的第一个子节点才会被渲染,<Route> 元素用它们的 path 属性匹配，<Redirect> 元素使用它们的 from 属性匹配。如果没有对应的 path 或 from，那么它们将匹配任何当前访问地址
<Redirect>
<Redirect> 渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址。
- to: string
重定向的 URL 字符串 - to: object
重定向的 location 对象 - push: bool
若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面。 - from: string
需要匹配的将要被重定向路径。
<Prompt>
当用户离开当前页面做出一些提示
- message: string
当用户离开当前页面时, 设置的提示信息
<Prompt message="确定要离开?">
- message: func
当用户离开当前页面时,设置的回调函数
<Prompt message={location => (
`Are you sue you want to go to ${location.pathname}?`
)} />
- when: bool
通过设置一定条件要决定是否启用prompt
对象和方法
history
histoty 是 RR4 的两大重要依赖之一（另一个当然是 React 了）
- length: number 浏览历史堆栈中的条目数
- action: string 路由跳转到当前页面执行的动作，分为 PUSH, REPLACE, POP
- location: object 当前访问地址信息组成的对象，具有如下属性
pathname: string URL路径
search: string URL中查询字符串
hash: string URL的hash片段
state: string string 例如执行 push(path, state) 操作时，location 的 state 将被提供到堆栈信息里，state 只有在 browser 和 memory history 有效 - push(path, [state]) 在历史堆栈信息里加入一个新条目。
- replace(path, [state]) 在历史堆栈信息里替换掉当前的条目
- goBack()
- goForward()
- go(n)
- block(prompt) 阻止跳转
history 对象是可变的，因为建议从 <Route> 的 prop 里来获取 location，而不是从 history.location 直接获取
const location= this.props.loaction
location
location 是指你当前的位置，将要去的位置，或是之前所在的位置
在以下情境中可以获取 location 对象
- 在 Route component 中，以 this.props.location 获取
- 在 Route render 中，以 ({location}) => () 方式获取
- 在 Route children 中，以 ({location}) => () 方式获取
- 在 withRouter 中，以 this.props.location 的方式获取
location 对象不会发生改变，因此可以在生命周期的回调函数中使用 location 对象来查看当前页面的访问地址是否发生改变。这种技巧在获取远程数据以及使用动画时非常有用
componentWillReceiveProps(nextProps) {
if (nextProps.location !== this.props.location) {
// 已经跳转了！
}
}
match
match 对象包含了 <Route path> 如何与 URL 匹配的信息，具有以下属性：
- params: object 路径参数 ,通过解析URL中的动态部分获得键值对
- isExact: bool 为true时, 真个URL都需要匹配
- path: string用来匹配的路径模式,用于创建嵌套的<Route>
- url: string URL匹配的部分, 用于嵌套<Link>
在以下情境中可以获取 match 对象 - 在 Route component 中，以 this.props.match获取
- 在 Route render 中，以 ({match}) => () 方式获取
- 在 Route children 中，以 ({match}) => () 方式获取
- 在 withRouter 中，以 this.props.match的方式获取
当一个 Route 没有 path 时，它会匹配一切路径。
文章参考:https://www.jianshu.com/p/e3adc9b5f75c/作者：minooo
网友评论