React-Router4x 路由

React-router@4.0

 

 

一、安装

1、安装 'react-router-dom'

注:react-router-dom是对react-router做了一些小升级的库，代码基于react-router

二、使用

//在index文件里配置陆路由

import React from 'react'

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

 

const Basic = () => (

  <Router>

    <div>

      <ul>

        <li><Link to="/">Home</Link></li>

        <li><Link to="/page1">Page1</Link></li>

        <li><Link to="/page2">Page2</Link></li>

      </ul>

 

      <hr/>

 

      <Route exact path="/" component={Home}/>

      <Route path="/page1" component={Page1}/>

      <Route path="/page2" component={Page2}/>

    </div>

  </Router>

)

1、 Router这个组件还是一个容器，Router下面可以放任意标签 

2、 Link标签依然可以理解为a标签，点击会改变浏览器url的hash值，通过Route标签捕获url并且返回component属性中定义的组件。

3、 exact这个关键字是将"/"做唯一匹配，否则"/"和"/xxx"都会匹配到path为"/"的路由，制定exact后，"/page1"就不会再匹配到"/"了

 

通过Route路由的组件，可以拿到一个match参数，这个参数是一个对象，其中包含几个数据：

· isExact：刚才已经说过这个关键字，表示是为作全等匹配

· params:path中包含的一些额外数据

· path:Route组件path属性的值

· url:实际url的hash值

· 

例如-写法一：

const Page2 = ({ match }) => {

    console.log(match.params)

    return <div>page2</div>

    }

 

写法二：

class Page2 extends Component {

render() {

console.log(this.props.match.params)

return <div>page2</div>

}

}

1、 可以通过传参数{match}获取url参数

2、 可以通过this.props获取url参数

 

例如：

url："/page1/book"

path:"/page1/:1"

isExact: true

params:{ 1:"book" }

 

<Router>

    <div>

      <ul>

        <li><Link to="/">Home</Link></li>

        <li><Link to={`/page1/book`}>Page1</Link></li>

        <li><Link to="/page2/2">Page2</Link></li>

        <li><Link to="/page3/3">Page3</Link></li>

      </ul>

 

      <hr/>

 

      <Route exact path="/" component={App}/>

      <Route path="/page1/:1" component={Page1}/>

      <Route path="/page2/:2" component={Page2}/>

      <Route path="/page3/:属性名" component={Page3}>

      </Route>

 

    </div>

  </Router>

 

 

Route的path中冒号":"后的部分相当于通配符，而匹配到的url将会把匹配的部分作为match.param中的属性传递给组件，属性名就是冒号后的字符串。

 

三、Router标签

上面的例子中我import的Router是BrowserRouter，这是什么东西呢？

如果你用过老版本的react-router，你一定知道history。

history是用来兼容不同浏览器或者环境下的历史记录管理的，当我跳转或者点击浏览器的后退按钮时，history就必须记录这些变化，而之前的react-router将history分为三类。

· hashHistory 老版本浏览器的history

· browserHistory h5的history

· memoryHistory node环境下的history，存储在memory（内存）中

 

memory： ['mem(ə)rɪ]

 

四、Route标签

在例子中你可能注意到了Route的几个prop

· exact: propType.bool

· path: propType.string

· component: propType.func

· render: propType.func

他们都不是必填项，注意，如果path没有赋值，那么此Route就是默认渲染的。
Route的作用就是当url和Route中path属性的值匹配时，就渲染component中的组件或者render中的内容。