react-router-dom 为我们提供了很强大方便的路由模块。
react-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-router-dom。安装很简单npm i react-router-dom --save,安装了淘宝镜像的就用cnpm吧。
import { BrowserRouter,Route,Switch } from 'react-router-dom'
而放在Route里面的component属性中的组件,会转化为“路由组件”
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<div>
<AuthRoute></AuthRoute>
<Route path="/login" component={Login}></Route> //路由组件Login
<Route path="/register" component={Register}></Route> //路由组件Register
</div>
</BrowserRouter>
</Provider>,
document.getElementById('root')
)
路由组件里的props有三个特殊对象属性
分别为:history(保存记录栈,和一些跳转相关操作)
location (当前URL信息)
match
我们 console.log( this.props)
而普通组件没有这三个属性,react-router-dom 提供了一个将普通组件转化为路由组件的方法
import { withRouter } from 'react-router-dom' //首先引入withRouter方法
AuthRoute = withRouter(AuthRoute) //然后把要转的组件传进去,返回值为一个已转化的路由组件
export default AuthRoute //这样就完成了 普通组件到路由组件转化
如下:
import React from 'react'
import { withRouter } from 'react-router-dom' //将普通组件转化为路由组件方法
class AuthRoute extends React.Component{ //定义普通组件
componentDidMount(){
console.log(this.props);
}
render(){
return <p>这是一个转换后的组件</p>
}
}
AuthRoute = withRouter(AuthRoute); //将普通组件转化为路由组件方法
export default AuthRoute ;