React route路由使用方法

route使用

安装react-router-dom

在项目命令行中，执行

cnpm install react-router-dom -S

在组件中通过对象的解构方式去获取到react-router-dom内置组件，在组件中，按需引入内置组件，在页面中进行使用：

• HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
• Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
• Link表示一个路由的链接，属性to

import {HashRouter,Route,Link} from 'react-router-dom'

代码演示

import React from 'react'
import {HashRouter,Route,Link} from 'react-router-dom'
import Home from './Home'


export default class App extends React.Component{
	
	render(){
		return(
			<div>
				<HashRouter>
					<h2>app.js</h2>
					
					<div style={{margin:"20px 0px"}}>
						<Link to="/wd">我的</Link> &nbsp;
					</div>
					
					<Route path="/wd" component={Home}></Route>
				</HashRouter>
			</div>
		)
	}
}

需要注意的地方

• Route 组件path地址是以/开头 ，配置component属性，是显示的组件，这个属性不可以大写
• Route组件可以单双标签使用，单标签需要/结尾，双标签不可以在中间写入别的东西
• Link to属性的地址也是/开头，Link在页面渲染的是a标签

Link跳转

<Link to="地址"></Link>

编程式跳转

this.props.history.push({pathname: '/three})