【React】React-router-dom v6嵌套路由Demo记录

组件结构

-TestHome/TestAbout组件

--News/message组件

App.js 渲染组件为TestHome,TestAbout组件

import React from 'react'
import {Link, Route, Routes, BrowserRouter, NavLink, Navigate} from 'react-router-dom'
import TestHome from "@/views/testRoute/TestHome"; // home组件
import TestAbout from "@/views/testRoute/TestAbout"; // about组件

// link活跃样式，样式在styled-component或者css文件中定义好
const getaActiveClass = ({isActive}) => {
  return isActive ? 'test list_group_item' : 'list_group_item'
}

function App() {
  return (
    <BrowserRouter>
      <h1>React Router Demo</h1>
      <div className={'list_group'}>
        <NavLink className={getaActiveClass} to={'/testhome'}>Home</NavLink>
        <br />
        <NavLink className={getaActiveClass} to={'/testabout'}>About</NavL