????? 在項(xiàng)目中免钻，嵌套路由是非常常見(jiàn)的屹电。比如，后臺(tái)管理系統(tǒng)，大部分都是使用的這種模式深浮，來(lái)實(shí)現(xiàn)頁(yè)面的總體劃分画舌。更加模塊化蚕断。
使用步驟
- 如果項(xiàng)目整體都已經(jīng)搭建好了韵吨，只需要安裝
react-router即可。
//使用npm安裝
npm install --save react-router-dom
- 首先先創(chuàng)建幾個(gè)子組件
childPage文件夾中存放二級(jí)導(dǎo)航的組件讽营。
image.png
Video.jsx是二級(jí)導(dǎo)航欄的組件虎忌，里面需引入video文件夾的子組件。
image.png
-
video.jsx頁(yè)面就是二級(jí)導(dǎo)航的內(nèi)容
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>二級(jí)導(dǎo)航欄</h5>
<ul>
<li>
<Link to="/video/reactpage">reactpage頁(yè)面</Link>
</li>
<li>
<Link to="/video/vue">Vue頁(yè)面</Link>
</li>
<li>
<Link to="/video/flutter">Flutter頁(yè)面</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文件橱鹏，里面包含一級(jí)導(dǎo)航以及路由
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>一級(jí)導(dǎo)航</h3>
<ul>
<li><Link to='/'>首頁(yè)</Link></li>
<li><Link to='/video/'>視頻教程</Link></li>
</ul>
<Route path="/" exact component={Index}/>
<Route path="/video/" component={Video}/>
</Router>
);
}
export default AppRouter;
???? 這樣就能實(shí)現(xiàn)簡(jiǎn)單的嵌套路由膜蠢，我只是舉個(gè)嵌套路由的簡(jiǎn)單例子，在實(shí)際項(xiàng)目中可以封裝一個(gè)路由文件出來(lái)莉兰，這樣更好的維護(hù)挑围，整個(gè)路由也能一目了然。
