1. 下载react的路由模块 5.0
npm install react-router-dom@5 --save]
2 . 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件
(注: 哈希模式用HashRouter 历史模式用BrowserRouter)
代码: import { HashRouter } from 'react-router-dom'
ReactDOM.render(
<HashRouter >
<App />
</HashRouter >,
document.getElementById('root')
);
3. 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route
3.1 import { Route, Switch,Redirect } from "react-router-dom";
3.2引入组件
3.3, 创建路由组件,配置路由, 并导出
export default function MyRouter(){
return(
<Switch >
{/* exact 精确匹配 因为每一个路由都有/ 不精确下 都会匹配主页*/}
<Route exact path="/" component={Home} />
{/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}
<Redirect from="/" to="/home" />
</Switch >
)
}
4, 在app.js中导入路由组件
导入路由组件
import RouterView from './router/index';
在根组件app模板中添加路由组件,即路由出口
<RouterView></RouterView>
5.在需要跳转的页面, 从路由模块导入工具组件 Link
import {Link} from 'react-router-dom'
使用Link组件执行路由跳转
<Link to="/">首页/Link>