router6之 嵌套路由

嵌套路由

import { Navigate } from 'react-router-dom'; 
import {Home} from '../view/home' 
import {About} from '../view/about' 
import {Message} from '../view/message' 
import {News} from '../view/news' 
const routes = [ 
    { 
        path: '/home', 
        element: <Home/>,
        children: [
            {
                path: 'news',
                element: <News/>
            },
            {
                path: 'message',
                element: <Message/>
            }
        ]
    }, 
    { 
        path: '/about', 
        element: <About/> 
    }, 
    { 
        path: '/', 
        element: <Navigate to="/home"/> 
    }, 
    { 
        path: '*', 
        element: <Home/> 
    }, 
] 
export default routes

路由表构建完成，该在何处呈现内容呢？

Home.jsx

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

import './index.css'

export function Home() {
  return (
    <div className='home'>
      <ul className='ul'>
        <li>
          <Link to="news">news</Link>
        </li>
        <li>
          <Link to="message">message</Link>
        </li>
      </ul>
      <div className='content'>
        <Outlet/>   // 重点是这里，对比route5是不一样的
      </div>
    </div>
  )
}

注意：router6使用 标签来呈现嵌套路由的内容，to跳转路径切记前面不能写‘/’,也就是 /News, /Message