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

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

使用步骤

• 如果项目整体都已经搭建好了，只需要安装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 (
        

            

                
二级导航栏
                

                    

                        reactpage页面
                    
                    

                        Vue页面
                    
                    

                        Flutter页面
                    
                
            
            

                
                
                
            
        
    )
}
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 (
        
            
一级导航
            

                
首页
                
视频教程
            
            
            
        
        
    );
}

export default AppRouter;

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

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