React Router的嵌套路由以及遇到的问题

      在项目中，嵌套路由是非常常见的。比如，后台管理系统，大部分都是使用的这种模式，来实现页面的总体划分。更加模块化。

使用步骤

• 如果项目整体都已经搭建好了，只需要安装react-router即可。

//使用npm安装
npm install --save react-router-dom

• 首先先创建几个子组件 childPage文件夹中存放二级导航的组件。

  

  Video.jsx 是二级导航栏的组件，里面需引入video文件夹的子组件。

  

• 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;

     这样就能实现简单的嵌套路由，我只是举个嵌套路由的简单例子，在实际项目中可以封装一个路由文件出来，这样更好的维护，整个路由也能一目了然。

需要注意的是，在一级导航栏匹配二级导航路由的时候，不要加exact 属性，否则二级导航中的子组件会出现不显示的问题。