React-router路由

1.页面跳转router，页面会重新渲染

2.Hash router，类似页面跳转，只是跳转到hash指定的状态，页面不会重新刷新渲染

3.H5 router，模拟路由的同时页面不跳转，既能操作hahs也能操作路径，不渲染不刷新(只处理后退，不处理前进)

 

安装：

yarn add react-router-dom

可以加版本号[email protected]

示例：

import {BrowserRouter as Router,Switch,Route,Link} from 'react-router-dom'


class A extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return <div>A component</div>
	}
}

class B extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return <div>B component</div>
	}
}

class App extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return(
			<div>
				<Link to="/a">组件A</Link>
				<br/>
				<Link to="/a/123">带参数的组件A</Link>
				<br/>
				<Link to="/b">组件B</Link>
				{this.props.children}
			</div>
		)
	}
}

ReactDOM.render(
	<Router>
		<App>
			<Router path="/a" component={A}/>
			<Router path="/b" component={B}/>
		</App>
	</Router>,
	document.getElementById('app')
);