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:<Navigate to='/home' />
    },
    {
        path:'/home',
        element:<HOME />
    },
    {
        path:'/about',
        element:<ABOUT />,
        children: [
            { path: 'message', element:<MESSAGE /> },
            { path: 'news', element:<NEWS />}
          ]
    }
]

export default indexRouter

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

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

function fn() {
    return (
        <div>
            <NavLink to='message'>首页</NavLink>
			<NavLink to='news'>分类</NavLink>
			<br />
            <Outlet/>
        </div>
    )
}
export default fn;

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