ReactRouter(react-router-dom)

// 路由配置
import { createBrowserRouter } from 'react-router-dom'
import Home from '../views/Home'
import Login from '../views/Login'
const router = createBrowserRouter([
    {
        path: "/home",
        element: <Home/>
    },
    {
        path: "/login",
        element: <Login />,
    },
])
export default router

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
// 导入路由
import router from './routers/index.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
    {/* 路由绑定 */}
    <RouterProvider router={router}></RouterProvider>
    </React.StrictMode>,
)

import { Link, useNavigate } from "react-router-dom"
function Login() {
    const navigate = useNavigate()
    return (
        <>
        <div>
            Login
            {/* 声明式写法 */}
            <Link to="/home">声明式，跳转到Home</Link>
            {/* 命令式写法 */}
            <button onClick={() => navigate('/home')}>命令式，跳转到Home</button>
        </div>
        </>
    )
}
export default Login

/* searchParams传参 */
// login.jsx页面
<button onClick={() => navigate('/home?id=1001&name=clue')}>searchParams传参</button>
// home.jsx页面
const [params] = useSearchParams()
const id = params.get('id')
const name = params.get('name')

/* params传参 */
// login.jsx页面
<button onClick={() => navigate('/home/1001/clue')}>params传参</button>
// 路由配置页面
const router = createBrowserRouter([
    {
        path: "/home/:id/:name",
        element: <Home/>
    },
    {
        path: "/login",
        element: <Login />,
    },
])
// home.jsx页面
const params = useParams()
const id = params.id
const name = params.name

/* 路由配置 */
const router = createBrowserRouter([
    {
        path: "/",
        element: <Layout/>,
        children: [
            {
                index: true, // 设置默认二级路由 一级路由访问 它也能够渲染
                // path: "board",
                element: <Board/>
            },
            {
                path: "about",
                element: <About/>
            }
        ]
    },
    {
        path: "/home/:id/:name",
        element: <Home/>
    },
    {
        path: "/login",
        element: <Login />,
    },
])

/* 一级路由页面 Layout.jsx */
/* 一级路由页面 Layout.jsx */
import { Link, Outlet } from "react-router-dom"
const Layout = () => {
    return (
        <>
        <div>
            一级路由Layout
            <Link to="/board">面板</Link>
            <Link to="/about">关于</Link>
            {/* 配置二级路由 */}
            <Outlet/>
        </div>
        </>
    )
}
export default Layout

/* 二级路由 About.jsx */
const About = () => {
    return (
        <>
        <div>About</div>
        </>
    )
}
export default About

/* 二级路由 Board.jsx */
const Board = () => {
    return (
        <>
        <div>Board</div>
        </>
    )
}
export default Board

/* 路由配置 */
const router = createBrowserRouter([
    {
        path: "/login",
        element: <Login />,
    },
    {
        path: "*",
        element: <NotFound />,
    },
])

/* 404页面 */
const NotFound = () => {
    return (
        <>
        <div>404页面</div>
        </>
    )
}
export default NotFound

// history 模式
import { createBrowserRouter } from 'react-router-dom'
const router = createHashRouter([
    {
        path: "/login",
        element: <Login />,
    }
])
// hash 模式
import { createHashRouter } from 'react-router-dom'
const router = createHashRouter([
    {
        path: "/login",
        element: <Login />,
    }
])