新版本发生了很多变化
4.0中路由不需要单独抽取配置,可以在任何组件里面实现,一切皆组件。
react-route 提供了一些router
的核心的api
,包括Router
,Route
,Switch
react-douter-dom 提供了 BrowserRouter
,HashRouter
,Route
,Link
,NavLink
基于浏览器端定制的包
1: 安装:
安装 yarn add react-route-dom
2 : 核心用法
(a) HashRoute
和 BrowserRouter
区别
这两个主要区别是 hash 以及html5的路由实现方式
http://localhost:3000/#/home/ref
http://localhost:3000/home/ref
(b) Route
: path,exact,component,render
(c): Navlink
和Link
(d): Switch
(e) Redirect
重定向
import { Redirect } from 'react-router-dom'
<Redirect to='/' /> 重定向
(f) 路由传值以及获取的方法:
/detail/:id this.props.match.parame.id
/detail ?id=1 this.props.location.search
其他内容:
switch
一旦匹配到一个就不会再往下匹配
仔细研究一下this.props.children
的使用方法,路由嵌套一般都需要使用这个属性
路由嵌套的时候需要注意 render
不要加大括号,需要的返回一个jsx
对象,否则没有了return
withRouter 的使用方法
{withRouter}
方法 让当前组件有能力获取路由的所有信息,异步组件及withRouter路由方法的使用
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(Logins))
路由使用按照项目的不同,以下两种方式需要灵活的使用:
- 组件化
- 配置化