React 学习——二级(子)路由配置、404页面配置

需要设置5个页面：router页面，一个二级页面，2个二级子页面，404页面

router页面：

import React from "react";
import { createBrowserRouter } from "react-router-dom";
import Article from "../views/article";
import About from "../views/about";
import My from "../views/my";
import NotFound from "../views/notFound";

const router = createBrowserRouter([
  {
    path: '/',
    element: <Article />,
    children: [
      {
        // path: 'about',
        index: true, //默认二级路由
        element: <About />
      },
      {
        path: 'my',
        element: <My />
      }
    ],
  },
  {
    path: '*',
    element: <NotFound />,
  }
])
export default router

一个二级页面：

import { Link,Outlet } from "react-router-dom"

const Article = ()=>{
  return (
    <div>
      文章页面
      <br/>
      {/* <Link to='/about'>关于</Link> */}
      <Link to='/'>关于</Link>  {/* 当是默认二级路由，不能写/about，只能写一个/ 就行 */}
      <br/>
      <Link to='/my'>我的</Link>

      {/* 二级路由出口 */}
      <Outlet />
    </div>
  )
}
export default Article

2个二级子页面：

//About页面
const About = ()=>{
  return (
    <div>
      关于-我是about
    </div>
  )
}
export default About





//My页面
const My = ()=>{
  return (
    <div>
      我的-我是my
    </div>
  )
}
export default My

404页面：

const NotFound = ()=>{
  return (
    <div>
      404页面
       {/* 在 http://localhost:3000/  后面随便敲点什么就能测试出404，如http://localhost:3000/aaa  */}
    </div>
  )
}
export default NotFound