Router

histroy 属性

histroy 来自于 es6 的 histroy 机制

Router组件里的history属性,用来监听浏览器地址栏的变化,并将URL解析成一个地址对象,供 React Router 匹配。

history属性,一共可以设置三种值

  • BrowserRouter
  • hashHistory 路由将通过URL的hash部分(#)切换。
  • createMemoryHistory 主要用于服务器渲染。它创建一个内存中的history对象,不与浏览器URL互动。

BrowserRouter

浏览器的路由就不再通过Hash完成了,而显示正常的路径example.com/some/path,背后调用的是浏览器的History API。

BrowserRouter放在最高的级别,把你需要的组件放在里面才会有props里的一些属性

例子:路由的参数传递

父组件

  1. import React from 'react'
  2. import { BrowserRouter,Route,Link } from 'react-router-dom'
  3. import Btn from './Btn'
  4. class App extends React.Component{
  5. render(){
  6. return(
  7. <BrowserRouter>
  8. <div className="app">
  9. <Link to='/btn'>进入Btn</Link>
  10. <Route path='/btn' component={Btn}/>
  11. </div>
  12. </BrowserRouter>
  13. )
  14. }
  15. }
  16. export default App

子组件

  1. import React from 'react'
  2. class Btn extends React.Component{
  3. render(){
  4. console.log(this.props)
  5. return(
  6. <div className="btn">
  7. <input type="button" value='点击添加' />
  8. </div>
  9. )
  10. }
  11. }
  12. export default Btn

在子组件的this.props里输出三个对象historylocationmatch

history(历史记录)

history 它提供了多种不同的方法来管理各种环境中的JavaScript中的会话历史,通过被包裹的子组件的this.props.history来显示。

history 对象通常具有以下属性和方法:

  • length - (number)历史堆栈中的条目数
  • action- (字符串)当前动作(PUSH,REPLACE,或POP)
  • location - (对象)当前位置。可能具有以下属性:
    • pathname - (string)URL的路径
    • search - (string)URL查询字符串
    • hash - (string)URL哈希片段
    • state- (字符串)位置特定的状态,例如push(path, state)当该位置被推送到堆栈时。仅在浏览器和内存历史记录中可用。
  • push(path, [state]) - (function)将新条目推入历史堆栈
  • replace(path, [state]) - (function)替换历史堆栈上的当前条目
  • go(n)- (function)通过n条目移动历史堆栈中的指针
  • goBack() - (功能)相当于 go(-1) 返回刚才的界面
  • goForward() - (功能)相当于 go(1) 前进一步
  • block(prompt)- (功能)防止导航(请参阅历史文档)

location(位置)

location对象代表了应用程序现在的位置。

location的属性和方法

  • hash(哈希值)
  • key(key值)
  • pathname(地址)
  • search(查询地址)
  • state(state是一个对象通过里面的from来写入一个地址)

match(路由匹配)

一个match对象包含有关如何信息相匹配的URL。

match对象的属性

  • params(对象)从与路径的动态段相对应的URL分析密钥/值对
  • isExact(布尔值)true如果整个URL匹配(没有尾随字符)
  • path(string)用于匹配的路径模式。有用建设嵌套小号
  • url(string)URL的匹配部分。有用建设嵌套小号

withRouter

如果想用router的方法,而组件没有在路由上,所以用withRouter去包装

  1. import React from 'react'
  2. import {withRouter} from 'react-router-dom'
  3. class Son extends React.Component{
  4. render(){
  5. console.log(this.props)
  6. return(
  7. <div className='son'>
  8. Son
  9. </div>
  10. )
  11. }
  12. }
  13. export default withRouter(Son)

父组件里直接使用<Son />导入,就可使用router的方法

Switch

Switch,路由跳转时只渲染出第一个与当前访问地址匹配的RouteRedirect

  1. <Switch> // 监听空路由
  2. <Route exact path="/" component={Home}/>
  3. <Redirect from="/old-match" to="/will-match"/>
  4. <Route path="/will-match" component={WillMatch}/>
  5. <Route component={NoMatch}/> // 空路由
  6. </Switch>

路由条件匹配

如果一个路由组件,只在需要的组件中加载。我们就会需要这一技巧

  1. <Route render={({ location }) => {
  2. //location 是从父组件接受到的 this.props.location 对象
  3. return location.pathname !== '/' ?
  4. //根据 location 的 pathname 属性进行路径的判断
  5. (<Sidebar />) : null
  6. //通过三步运算来判断显示的路由
  7. }} />