React-Router入门使用

React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。

React路由跳转

制作一个平常一样的点击切换路由效果,首先需要安装cnpm install react-router-dom

• 创建一个根目录AppRouter.js,并仰引入react-router-dom，在创建两个js组件

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Index from './Index'
import List from './List'
class APPRouter extends Component {
  render() {
    return (
      <Router>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/List/23">列表页</Link>
          </li>
        </ul>
        <Route path="/" exact component={Index}></Route>
        <Route path="/list" component={List}></Route>
      </Router>
    )
  }
}
export default APPRouter

• exact精准匹配
  在Index.js和List.js文件中分别写入以下代码

import React, { Component } from 'react'
class Index extends Component {
  render() {
    return <div> 列表页面 </div>
  }
}

export default Index

ReactRouter动态传值

这就比较常见的根据id跳转页面，显示不同内容.
这个设置是以:开始的，然后紧跟着你传递的key（键名称）名称。

<Route path="/list/:id" component={List}></Route>

就可以在Link上设置值了，模拟一个json数据，点击跳转页面

import React, { Component } from 'react'
import { Link, Redirect } from 'react-router-dom'

class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        { cid: 1, title: '这个是首页1' },
        { cid: 2, title: '这个是首页1' },
        { cid: 3, title: '这个是首页2' }
      ]
    }
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li key={index}>
                <Link to={'/list/' + item.cid}>{item.title}</Link>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

export default Index

怎么接受传过来的id,组件接收传递过来的值的时候，可以在声明周期componentDidMount中进行

• patch:自己定义的路由规则，可以清楚的看到是可以产地id参数的。
• url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
• params：传递过来的参数，key和value值。
  

componentDidMount() {
    console.log(this.props.match)
    //获取传过来的id
    let tempId = this.props.match.params.id
    this.setState({
      id: tempId
    })
  }

以上就是比较简单的react-router使用