路由 -react-router-dom16

传统的路由搭建过于麻烦,整合力度不够,但是函数组件推出以后,路由表的建立与vue的路由有点兄弟的意思:

// import {lazy} from "react";
import Home from "../pages/Home";
import Searched from "../pages/Search";
import Tuijian from "../component/Home/Tuijian";
import Geshou from "../component/Home/Geshou";
import Paihang from "../component/Home/Paihang";
import Zixun from "../component/Home/Zixun";
import Login from '../pages/Login'
import Zhuce from '../pages/Zhuce'
import GeDan from "../pages/GeDan";
import Mine from "../pages/Mine";
// const GeDan=lazy(()=>import("../pages/GeDan"));
//用于重定向
import {Navigate} from 'react-router-dom'

//eslint-disable-next-line
export default [
    {
        path: '/home',
        element: <Home/>,
        children: [
            {
                path: 'tuijian',
                element: <Tuijian/>
            },
            {
                path: 'geshou',
                element: <Geshou/>
            },
            {
                path: 'paihang',
                element: <Paihang/>
            },
            {
                path: 'zixun',
                element: <Zixun/>
            },
            {
                path: '/home',
                element: <Navigate to='/home/tuijian'/>
            }
        ]

    },
    {
        path: '/search',
        element: <Searched/>
    },
    {
        path: '/gedan',
        element: <GeDan/>
    },
    {
        path: '/login',
        element: <Login/>
    },
    {
      path: '/zhuce',
      element: <Zhuce/>
    },
    {
        path: '/mine',
        element: <Mine/>
    },
    {
        path: '/',
        element: <Navigate to='/home'/>
    }
]
//调用:

import {useRoutes} from "react-router-dom";
import route from "./router";

export default function App() {
    const element = useRoutes(route)
    return (
        <div className='box'>
            {element}
        </div>
    )
}
//有子路由的需要引入Outlet来展示子组件
import {outlet} from 'react-router-dom'
//调用:<Outlet/>就是子组件展示的地方

<Outlet/>