react-router4.0 路由基本使用案例

2019年6月28日 19:20:01
先看页面效果

react-router4.0+的基本使用.gif image.png

可以看到现在的react-router 版本已经到达了5.0.1了，相对于之前的版本有较大的改动，现在react路由系统已经逐渐像组件那样使用了。本人对之前版本的路由基本上没有多少了解。现在由于项目需要使用开始学习路由的使用，因此可能也会有不少理解不对的地方，希望读者指出错误和不足之处。

以下是路由的基本使用，这个例子官网也有，这里基本上没有太多的改动。里面包含以下几个功能

1. 基本的页面跳转，不带参数
2. 嵌套路由，子路由里面有带参数跳转

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

class BasicExample extends Component {
  render() {
    return (
      <Router>
        <ul>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/about">关于</Link></li>
          <li><Link to="/topics">话题</Link></li>
        </ul>
        <hr />

        <Route exact path="/" component={Home}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/topics" component={Topics}></Route>
      </Router>
    )
  }
}

class Home extends Component {
  render() {
    return (
      <div>我是Home</div>
    )
  }
}
class About extends Component {
  render() {
    return (
      <div>我是About</div>
    )
  }
}
class Topics extends Component {
  componentDidMount(){
    console.log('Topics', this.props)
  }
  render() {
    let { match } = this.props
    return (
      <div>
        <div>我是Topics</div>
        <ul>
          <li><Link to={`${match.url}/first`}>first</Link></li>
          <li><Link to={`${match.url}/second`}>second</Link></li>
          <li><Link to={`${match.url}/third`}>third</Link></li>
        </ul>

        <Route path={`${match.url}/:topicId`} component={Topic}></Route>
        <Route 
          exact
          path={match.url}
          render={() => <h3>请选择一个话题</h3>}
        >
        </Route>
      </div>
    )
  }
}

class Topic extends Component {
  componentDidMount() {
    console.log('Topic', this.props)
  }
  render() {
    let { match } = this.props
    return (
      <div>params参数 topicId: {match.params.topicId}</div>
    )
  }
}
export default BasicExample

注意<Route/>路由渲染是有优先级顺序的，可能会有同一个当前URL匹配多个<Route/>。
例如第一个根路径 "/"，如果它的<Route/>里面不加exact属性，则它对应的组件总是会被匹配到渲染到页面上。exact属性的意思就是：当前URL必须完全匹配,"/"只会匹配到 "/",而类似"/aaa"的其他URL是不会被匹配到的。