ReactRouter学习之旅四：嵌套路由

要实现的小案例如下：

搭建项目基础

新建一个项目来完成我们的新案例：

create-react-app demo02

安装react-router：

npm install --save react-router-dom

照例清除一下src文件夹下除index.js外的其他文件。在src文件夹下新建Pages文件夹，Pages下新建video（视频教程）和workplace（职场技能）文件夹。

src文件夹下新建AppRouter.js文件，AppRouter作为首页组件，首页组件一般都是配置路由的。

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import Index from './Pages/Index';
import './index.css';

function AppRouter(){
    return (
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h3>一级导航</h3>
                    <ul>
                        <li><Link to="/">博客首页</Link></li>
                        <li><Link to="/">视频教程</Link></li>
                        <li><Link to="/">职场技能</Link></li>
                    </ul>
                </div>
                <div className="rightMain">
                    <Route path="/" exact component={Index}/>
                </div>
            </div>
        </Router>
    )
}

export default AppRouter;

在Pages下新建Index页面：

import React from 'react';

function Index(){
    return (
        <h2>我是首页</h2>
    )
}

export default Index;

在src下新建index.css，样式如下：

body{
    padding: 0px;
    margin: 0px;
}

.mainDiv{
    display: flex;
    width: 100%;
}
.leftNav{
    width: 16%;
    background-color: #c0c0c0;
    color:#333;
    font-size:24px;
    height: 1000px;
    padding: 20px;
}
.rightMain{
    width: 84%;
    height:1000px;
    background-color: #fff;
    font-size:20px;

}

修改index.js文件，将AppRouter引入：

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './AppRouter';

ReactDOM.render(
    <AppRouter />,
  document.getElementById('root')
);

初步效果如下：

 “视频教程”嵌套路由制作

在编写Video.js页面前，需要在video文件夹下新建Flutter.js、ReactPage.js、Vue.js，分别代表不同的视频页面（三级页面）。

Flutter.js：

import React from "react";

function Flutter(){
    return (
        <h2>我是Flutter页面</h2>
    )
}

export default Flutter;

ReactPage.js：

import React from "react";

function ReactPage(){
    return (
        <h2>我是ReactPage页面</h2>
    )
}

export default ReactPage;

Vue.js页面：

import React from "react";

function Vue(){
    return (
        <h2>我是Vue页面</h2>
    )
}

export default Vue;

在Pages文件夹下新建Video.js文件，作为二级页面视频教程页面，引入ReactPage、Flutter、Vue并配置好路由：

import React from 'react';
import {Route,Link} from 'react-router-dom';
import ReactPage from './video/ReactPage';
import Flutter from './video/Flutter';
import Vue from './video/Vue';

function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                </ul>
            </div>
            {/* 配置路由 */}
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Route path="/video/reactpage/" component={ReactPage}/>
                <Route path="/video/flutter/" component={Flutter}/>
                <Route path="/video/vue/" component={Vue}/>
            </div>
        </div>
    )
}

export default Video;

topNav和videoContent的样式如下：

.topNav{
    height:50px ;
    background-color: #cfdefd;
}
.topNav ul{
   display: flex; 
   margin: 0px;
   padding: 0px;
}
.topNav li{
   padding: 10px;
   text-align: center;
   list-style: none;
 }
 .videoContent{
     padding:20px;
 }

在AppRouter.js中配置好视频教程Video的路由：

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import Index from './Pages/Index';
import Video from './Pages/Video';
import './index.css';

function AppRouter(){
    return (
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h3>一级导航</h3>
                    <ul>
                        <li><Link to="/">博客首页</Link></li>
                        <li><Link to="/video">视频教程</Link></li>
                        <li><Link to="/">职场技能</Link></li>
                    </ul>
                </div>
                <div className="rightMain">
                    <Route path="/" exact component={Index}/>
                    <Route path="/video/" component={Video}/>
                </div>
            </div>
        </Router>
    )
}

export default AppRouter;

实现效果如下：

“职场技能”嵌套路由制作

和制作视频教程的嵌套路由流程一样，我们先在workplace文件夹下创建三级页面Getup.js以及Money.js。

Getup.js：

import React from "react";

function Getup(){
    return (
        <h2>程序员早期攻略详情</h2>
    )
}

export default Getup;

Money.js：

import React from "react";

function Money(){
    return (
        <h2>程序员加薪秘籍详情</h2>
    )
}

export default Money;

在Pages文件夹下新建Workplace.js文件，作为二级页面——职场技能页面。在Workplace.js中引入Money以及Getup组件并配置好路由：

import React from 'react';
import {Route,Link} from 'react-router-dom';
import Money from './workplace/Money';
import Getup from './workplace/Getup';

function Workplace(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/workplace/money">程序员加薪秘籍</Link></li>
                    <li><Link to="/workplace/getup">程序员早起攻略</Link></li>
                </ul>
            </div>
            {/* 配置路由 */}
            <div className="videoContent">
                <div><h3>职场软技能</h3></div>
                <Route path="/workplace/money/" component={Money}/>
                <Route path="/workplace/getup/" component={Getup}/>
            </div>
        </div>
    )
}

export default Workplace;

在AppRouter.js中配置好职场技能Workplace二级页面的路由：

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import Index from './Pages/Index';
import Video from './Pages/Video';
import Workplace from './Pages/Workplace';
import './index.css';

function AppRouter(){
    return (
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h3>一级导航</h3>
                    <ul>
                        <li><Link to="/">博客首页</Link></li>
                        <li><Link to="/video">视频教程</Link></li>
                        <li><Link to="/workplace">职场技能</Link></li>
                    </ul>
                </div>
                <div className="rightMain">
                    <Route path="/" exact component={Index}/>
                    <Route path="/video/" component={Video}/>
                    <Route path="/workplace/" component={Workplace}/>
                </div>
            </div>
        </Router>
    )
}

export default AppRouter;

实现效果如下：

完成！