React-Router-dom@6模块化使用

npm create vite@latest React-demo

import Home from "../components/Home.jsx";
import About from "../components/About.jsx";
import {Navigate} from "react-router-dom";
import Vue from "../components/Vue.jsx";
import ReactCorse from "../components/ReactCorse.jsx";
const Router = [
    {
        path:'/',
        element: <Navigate to={'/home'}/>
    },
    {
        path: '/home',
        element:<Home/>
    },
    /**
     *  用于重定向
     *      默认显示about下的vue组件
     * */
    {
        path: '/about',
        element: <Navigate to={'/about/vue'}/>,
    },
    {
        path: '/about',
        element: <About/>,
        children:[
            {
                path:'vue',
                element: <Vue/>
            },
            {
                path: 'react',
                element: <ReactCorse/>
            }
        ]
    }
]
export default Router;

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import {BrowserRouter} from "react-router-dom";
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

import React from 'react';
import {useRoutes} from "react-router-dom";
import Router from "./route/index.jsx";
const App = () => {
    return (
        <>
            {useRoutes(Router)}
        </>
    );
};
export default App;

import React from 'react';
import {useNavigate} from "react-router-dom";
const Home = () => {
    const navigate = useNavigate()
    return (
        <div className={'Home'}>
            <h2>Home</h2>
            <button onClick={()=>navigate('/about')}>去about</button>
        </div>
    );
};
export default Home;

import React from 'react';
import {NavLink, Outlet, useNavigate} from "react-router-dom";
import '../assets/css/About.scss'
const About = () => {
    const navigate = useNavigate()
    return (
        <div>
            <h2>About</h2>
            <button
                onClick={()=>navigate('/')}
            >返回</button>
            <div>
                <NavLink to={'vue'}>Vue</NavLink>
                <NavLink to={'react'}>React</NavLink>
            </div>
      {/*about下的二级路由视图*/}
            <Outlet/>
        </div>
    );
};
export default About;

import React from 'react';
const VueCourse = () => {
    return (
        <div>
            <h3>Vue课程</h3>
        </div>
    );
};
export default VueCourse;

import React from 'react';
const ReactCourse = () => {
    return (
        <div>
            <h3>React课程</h3>
        </div>
    );
};
export default ReactCourse;