React开发笔记（二）转化路由组件

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 ;

这样一个组件就能使用以上三个对象属性的api，或者获取相关的路由 url 信息