P05: 实例-ReactRouter嵌套路由

本文主要讲的是 ReactRouter 嵌套路由，这种路由形式在互联网上也是比较常见的。比如我们后台的管理系统，大部分是用嵌套路由，来实现页面的总体划分。当然前端页面也是会有很多嵌套路由的实现，那么如何使用React Router中的嵌套路由呢？本文将通过一个小实例来为大家详细讲解，在这个过程中我们会复习以前的路由知识，并利用以前的知识构建有些复杂的路由关系。

用脚手架创建项目

重新创建一个项目Demo02,直接在 VSCode 里输入，下面的命令初始化项目代码。

create-react-app demo02

这样项目就创建好了，但是里边有很多暂时不需要的文件，删除这些，让代码结构保持最小化。只留/src目录里的index.js文件，然后再删除一些index.js文件里无用的代码。

项目初始化好以后，再在安装React Router,使用npm来进行安装(安装时记得要进入到 Demo02 文件夹中)。

npm install --save react-router-dom

初始化基本目录

根据草图分析，可以指导有两层关系，第一层是大类，第二层是子类别。先再/src目录下建立一个Pages的文件夹。然后在/Pages目录下再建立两个目录/frontCourse和/workPlace,然后在/src目录下建立一个AppRouter.js文件作为首页和路由的配置文件。目录结构如下所示:

- src
|--Pages
   |--frontCourse
   |--workPlace
|--index.js
|--AppRouter.js

建立完成后，我们先编写AppRouter.js,为的是让程序拥有首页，并让程序可以跑起来。文件新建以后可以用快速生成代码的方式，把基本代码做完。

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

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

写完这个文件，然后修改一下/src/index.js文件，需要引入AppRouter，并进行Render渲染。

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

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

这时候就可以在终端里输入npm start让程序跑起来，然后去浏览器中进行查看了。

添加基本样式

在/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;

}

写完之后把这个 CSS 文件引入到AppRouter.js文件中，就可以有一定的样式了。然后再到浏览器中查看一下效果，如果能正常显示，说明到目前为止，我们制作的是正确的。

接着我们继续添加我们的程序，把其他部分的嵌套路由制作完成。嵌套路由简单理解就是在子页面中再设置一层新的路由导航规则。

编写 frontCourse 中的子页面

在编写FrontCourse.js页面之前，我们需要在/src/Pages/frontCourse下面建立三个子文件，分别是ReactPage.js,Flutter.js和Vue.js，也代表着不同的视频页面。

ReactPage.js 组件

import React from "react";
function Reactpage(){
    return (<h2>我是 React 页面</h2>)
}
export default Reactpage;

Flutter.js 组件

import React from "react";
function Flutter(){
    return (<h2>我是 Flutter 页面</h2>)
}
export default Flutter;

Vue.js 组件

import React from "react";
function Vue(){
    return (<h2>我是 Vue 页面</h2>)
}
export default Vue;

这样就相当于三个页面做好了，当然我做的是非常简单的。

编写FrontCourse.js页面

这个页面就是二级导航的编写，这个的编写也是教程的重点。

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


function FrontCourse(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/frontCourse/reactpage">React 教程</Link></li>
                    <li><Link to="/frontCourse/vue">Vue 教程</Link></li>
                    <li><Link to="/frontCourse/flutter">Flutter 教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>前端教程</h3></div>
                <Route path="/frontCourse/reactpage/"   component={Reactpage} />
                <Route path="/frontCourse/vue/"   component={Vue} />
                <Route path="/frontCourse/flutter/"   component={Flutter} />
            </div>
        </div>
    )
}
export default FrontCourse;

修改AppRouter.js文件

当我们的FrontCourse组件制作完成后，可以把它引入到AppRouter.js文件中，然后配置对应的路由。为了方便你的学习，这里给出了全部代码，并在重用修改的地方给予标注。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
//--关键代码------------start
import FrontCourse from './Pages/FrontCourse'
//--关键代码------------end
import './index.css'

function AppRouter() {
    return (
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h3>一级导航</h3>
                    <ul>
                        <li> <Link to="/">博客首页</Link> </li>
                        {/*--关键代码------------start*/}
                        <li><Link to="/frontCourse/">前端教程</Link> </li>
                        {/*--关键代码------------end*/}
                        <li><Link to="">职场技能</Link> </li>
                    </ul>
                </div>

                <div className="rightMain">
                    <Route path="/" exact component={Index} />
                    {/*--关键代码------------start*/}
                    <Route path="/frontCourse/" component={FrontCourse} />
                    {/*--关键代码------------end*/}
                </div>
            </div>
        </Router>
    );
}

export default AppRouter;

这时候就可以到浏览器中看看效果了，当然目前还没有 CSS 样式，所以不是很好看。

.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;
}

这样我们就实现了“前端教程”的React Router的路由嵌套功能，看起来还是非常简单的。

把”职场技能”这个链接的嵌套路由也做了。

编写第三级子页面

在”职场技能”里只作两个子页面，”程序员加薪秘籍”和”程序员早起攻略”。在/src/Pages/workPlace目录下，新建两个文件Money.js和Getup.js，然后编写代码。

Money.js 组件

import React from "react";
function Money(){
    return (<h2>程序员加薪秘籍详情</h2>)
}
export default Money;

Getup.js 组件

import React from "react";
function Getup(){
    return (<h2>程序员如何提升技能？</h2>)
}
export default Getup;

编写二级子页面 Workplace

在/src/Pages文件夹下建立一个Workplace.js页面，作为二级子页面。

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/Moeny">程序员加薪攻略</Link></li>
                    <li><Link to="/workplace/Getup">程序员技能攻略</Link></li>

                </ul>
            </div>
            <div className="videoContent">
                <div><h3>职场软技能</h3></div>
                <Route path="/workplace/Moeny/" component={Money} />
                <Route path="/workplace/Getup/" component={Getup} />
            </div>
        </div>
    )
}
export default WorkPlace;

这个组件完成后，可以进入主路由里把二级页面配置一下。

配置主路由 AppRouter.js

思路是先引入要配置的路由Workplace,然后配置路由<Route>,最后编写链接<Link>。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import FrontCourse from './Pages/FrontCourse'
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="/frontCourse/">前端教程</Link> </li>
                        <li><Link to="/workplace/">职场技能</Link> </li>
                    </ul>
                </div>

                <div className="rightMain">
                    <Route path="/" exact component={Index} />
                    <Route path="/frontCourse/" component={FrontCourse} />
                    <Route path="/workplace/" component={Workplace} />
                </div>
            </div>
        </Router>
    );
}

export default AppRouter;

完成后，就可以再浏览器长查看一下效果，可以正常显示就说明一切正常，我们这个小案例也就算完成了。

总结

本文其实知识点并不多，主要是通过案例练习一下。下节我将讲解一下如何动态的获取路由地址，并进行路由配置。

以上关于P05: 实例-ReactRouter嵌套路由的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。