【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</NavLink>
      </div>

      <div> // Routes需要用被标签包裹
        <h3>我是展示区</h3>
        <Routes>
          <Route path={'/testhome/*'} element={<TestHome />} /> // 这里需要写/*匹配子路由
          <Route path={'/testabout'} element={<TestAbout />} />
          <Route path={""} element={<Navigate to={'/testabout'} />} /> // 路由重定向
        </Routes>
      </div>
    </BrowserRouter>
  )
}
export default App

TestAbout.js

import React from 'react'

function TestAbout() {
  return (
    <>
      <h3>我是About的内容</h3>
    </>
  )
}

export default TestAbout

TestHome.js  子组件为News,Message

import React from 'react'
import News from "@/views/testRoute/News";
import Message from '@/views/testRoute/Message'
import {NavLink, Route, Routes, Navigate} from "react-router-dom";

const getaActiveClass = ({isActive}) => {
  return isActive ? 'test_child' : 'list_group_item'
}

function TestHome() {
  return (
    <>
      <h3>我是Home的内容</h3>
      <ul>
        <li>
          <NavLink className={getaActiveClass} to={'/testhome/news'}>News</NavLink> // 这里要带上父组件路由
        </li>
        <li>
          <NavLink  className={getaActiveClass} to={'/testhome/message'}>Message</NavLink>
        </li>
      </ul>

      <div>
        <h3>我是子组件的展示区</h3>
        <Routes>
          <Route path={'news'} element={<News />} /> // 父组件渲染时候写了/*此处就不需要再写父组件路由
          <Route path={'message'} element={<Message />} />
          <Route path={''} element={<Navigate to={'/testhome/news'} />} />
        </Routes>
      </div>
    </>
  )
}

export default TestHome

效果图：