react-router 基本组件的使用

1、安装 react-router-dom

	npm install -save react-router-dom

2、在需要使用路由的页面中引入

	import React from "react";
	import { BrowserRouter as Router, Route, Link } from "react-router-dom";

3、路由配置

	（1）、导航路由 
			function AppRouter() {
				return (
							<Router>
							  <div>
							   <nav>
						          <ul>
						            <li> <Link to="/"> Home </Link> </li>
						            <li> <Link to="/about/"> About </Link> </li>
						            <li> <Link to="/users/"> Users </Link> </li>
						          </ul>
						        </nav>
						        <Route path="/" exact component={Index} />
						        <Route path="/about/" component={About} />
						        <Route path="/users/" component={Users} />
						      </div>
						    </Router>
			 	 );
			 }
			export default AppRouter;

(2)、带有activeClassName 的导航路由

4、< switch >的使用

分组<route> 不需要<switch>，但它非常有用。**<switch>**将迭代其所有子元素<route>并且只渲染与
当前位置匹配的第一个元素。当多个路由的路径匹配相同的路径名、在路由之间设置转换动画以及
确定没有路由匹配当前位置时（以便您可以呈现“404”组件），这将有所帮助。
		 <Switch>
                 <Route exact path="/" component={LiBai} />
                 <Route path="/about" component={DuFu} />
                 <Route path="/contact" component={LiShangYin} />
                 {/* 当上述内容都不匹配时，将呈现<False> */}
                 <Route component={False} />
         </Switch>

5、使用js跳转

（1）、导入withRouter方法
		import { withRouter } from 'react-router-dom';
（2）、触发路由跳转的组件
 		export default withRouter(PageList);
（3）、通过history的push方法跳转路由
		 this.props.history.push('/pagedetail/')