5.react嵌套路由

首先在路由表里面新增一个children，children为一个数组

import {Navigate } from 'react-router-dom';    // 路由插件
import HOME from "../pages/home";
import ABOUT from "../pages/about";
import MESSAGE from "../pages/message";
import NEWS from "../pages/news";

const indexRouter  = [
    // 路由重定向
    {
        path:'/',
        element:
    },
    {
        path:'/home',
        element:
    },
    {
        path:'/about',
        element:,
        children: [
            { path: 'message', element: },
            { path: 'news', element:}
          ]
    }
]

export default indexRouter

然后在二级路由页面引入Outlet组件

import React from 'react';
import {NavLink,Outlet} from 'react-router-dom'

function fn() {
    return (
        

            首页
			分类
			

            
        
    )
}
export default fn;

end：添加之后点击二级路由之后一级路由的高亮会消失