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父组件中定义子路由规则