在项目中,嵌套路由是非常常见的。比如,后台管理系统,大部分都是使用的这种模式,来实现页面的总体划分。更加模块化。
使用步骤
- 如果项目整体都已经搭建好了,只需要安装
react-router
即可。
//使用npm安装
npm install --save react-router-dom
- 首先先创建几个子组件
childPage
文件夹中存放二级导航的组件。
image.png
Video.jsx
是二级导航栏的组件,里面需引入video
文件夹的子组件。
image.png
-
video.jsx
页面就是二级导航的内容
import React from 'react';
import { Route, Link } from 'react-router-dom';
import Reactpage from './video/ReactPage.jsx';
import Vue from './video/Vue.jsx';
import Flutter from './video/Flutter.jsx';
function Video() {
return (
<div>
<div>
<h5>二级导航栏</h5>
<ul>
<li>
<Link to="/video/reactpage">reactpage页面</Link>
</li>
<li>
<Link to="/video/vue">Vue页面</Link>
</li>
<li>
<Link to="/video/flutter">Flutter页面</Link>
</li>
</ul>
</div>
<div>
<Route path="/video/reactpage" exact component={Reactpage}/>
<Route path="/video/vue" exact component={Vue}/>
<Route path="/video/flutter" exact component={Flutter}/>
</div>
</div>
)
}
export default Video
- 建立
appRouter.js
文件,里面包含一级导航以及路由
import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
//引入组件
import Index from './Index.jsx';
import Video from './childPage/Video.jsx';
function AppRouter() {
return (
<Router>
<h3>一级导航</h3>
<ul>
<li><Link to='/'>首页</Link></li>
<li><Link to='/video/'>视频教程</Link></li>
</ul>
<Route path="/" exact component={Index}/>
<Route path="/video/" component={Video}/>
</Router>
);
}
export default AppRouter;
这样就能实现简单的嵌套路由,我只是举个嵌套路由的简单例子,在实际项目中可以封装一个路由文件出来,这样更好的维护,整个路由也能一目了然。
网友评论