React 路由

react 路由使用步骤 （此文档为react路由 4.x 版本）

1、终端下载 react-router 插件

   npm install react-router-dom --save

2、react 项目入口文件导入

   import { BrowserRouter as Router } from 'react-router-dom'

//确定路由使用范围

	ReactDOM.render(
	                //Router组件包裹app根标签，表示根标签中都能使用路由
	  		<Router>
	    			<App />
	    		</Router>,
	  		document.getElementById('root')
		);

3、 创建路由文件src/router/index.js，并从路由模块中导入工具组件Route

	import { Route } from "react-router-dom";

4, 创建路由组件,配置路由, 并导出

   // 导入react
      import React from "react"
   // 从路由模块中导入工具组件Route 
      import { Route } from "react-router-dom";
   // 导入路由控制跳转的组件
      import Home from "../views/Home"
      import Order from "../views/Order"
      import User from "../views/User"

   // 用函数创建  路由组建  并导出
      export default function MyRouter() {
        return (
          <div>
            {/*通过Route组件配置路由，一个<Route>对应一个路由
            exact 表示精准匹配，只有路径完全一致才能匹配 */}
            <Route exact path="/" component={Home} />
            <Route exact path="/user" component={User} />
            <Route exact path="/order" component={Order} />
          </div>
        )
      }

5, 在app.js中导入路由组件

	import RouterView from './router/index';

6, 在根组件app模板中添加路由组件,即路由出口

	<RouterView></RouterView>

7, 在需要跳转的页面, 从路由模块导入工具组件 Link

	import {Link} from 'react-router-dom'

8, 使用Link组件执行路由跳转

	<Link to="/">首页/Link>