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'
  5. class App extends React.Component{
  6.     render(){
  7.         return(
  8.             <BrowserRouter>
  9.             <div className="app">
  10.                 <Link to='/btn'>进入Btn</Link>
  11.                 <Route path='/btn' component={Btn}/>
  12.             </div>
  13.             </BrowserRouter>
  14.         )
  15.     }
  16. }
  17. export default App

子组件

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

在子组件的this.props里输出三个对象history，location，match

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'
  4. class Son extends React.Component{
  5.     render(){
  6.         console.log(this.props)
  7.         return(
  8.             <div className='son'>
  9.                 Son
  10.             </div>
  11.         )
  12.     }
  13. }
  14. export default withRouter(Son)

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

Switch

Switch，路由跳转时只渲染出第一个与当前访问地址匹配的Route或Redirect

  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. }} />