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>