React-Router

React-RouterV4.x特性讲解

React-RouterV4.x单页面版本切换

• 路由一般都是在根目录(app.js)/根标签(div.app)上做,要想实现路由的跳转,一定要把根标签包含在路由组件中
  
• 配置路由 Route组件
  
• 接下来就可以在地址栏输入不同的路径而显示不同的版块
  
• 因为V4.x版本默认不排他,多个匹配,所以加上exact
• 配置Link组件,可以简单的理解为a标签
  
• 可以在界面上看到导航栏,点击相应的导航栏,跳转到不同的页面(组件)
  

React-RouterV4.x动态传值

• 一般在跟路由上都要包裹BrowserRouter
  
  

实例

• 在Hpt.jsx的componentDidMount生命周期钩子中,取值

import React, { Component } from "react"
export default class Hot extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render () {
    return <div>我是热榜版块</div>
  }
  componentDidMount () {
    console.log(this.props.match.params)
  }
}

• 在app.js对应路由中传值和接收值

React-RouterV4.x Link传值

• 点击热榜,我们想要进入详情页
  
  
• 既然想要页面之间的跳转,我们需要导入Link组件(因为在根组件/根元素中配置了BrowserRouter和Route组件,所以在具体的组件中不需要再次配置)
  
  
• 此时的参数并不是保存在params中

React-RouterV4.x路由重定向

• render函数中加判断条件,利用Redirect组件重定向
  

React-RouterV4.x路由嵌套

• 嵌套的路由在父组件中写Link和Route相关的规则
• 在Hot.jsx父组件中定义子路由规则