Router路由

一、路由

安装路由

npm install react-router-dom -S

创建路由文件

import { createBrowserRouter } from "react-router-dom";
import Home from "../home/Home";
const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />, // 这里必须是标签的形式
    }
]);
export default router;

在App.js中引入

import router from "./router";
import { RouterProvider } from "react-router-dom";
<RouterProvider router={router}></RouterProvider>

路由导航(跳转)

import { Link, useNavigate } from "react-router-dom";
const Dome = () => {
    const navigate = useNavigate();
    return (
        <div>
            {/* link解析后为a标签 */}
            <Link to="/">首页</Link>
            {/* 点击按钮跳转(不带参数) */}
            <button onClick={() => navigate('/')}>跳转</button>
        </div>
    )
}

路由传参

import { useNavigate } from "react-router-dom";
const Dome = () => {
    const navigate = useNavigate();
    return (
        <div>
            {/* 点击按钮跳转(带参数方式1) */}  
            <button onClick={() => navigate('/home?id=123&name=哈哈哈')}>带参跳转Home</button>
            {/* 点击按钮跳转(带参数方式2) 注：此方式必须在路由配置 path: '/about/:id/:name', */}
            <button onClick={() => navigate('/about/123/哈哈哈')}>带参跳转Home</button>
        </div>
    )
}

二、子路由

定义子路由

{
    path: '/layout',
    element: <Layout/>,
    children: [
        {
            // path: '/layout/default',
            index: true, // 将当前页面设置为默认页面，当路径为/layout时，自动跳转到此页面
            element: <Default/>,
        },
        {
            path: '/layout/board',
            element: <Board/>,
        },
        {
            path: '/layout/article',
            element: <Article/>,
        }
    ]
}

在Layout组件中使用

import { Link, Outlet } from "react-router-dom"
const Layout = () => {
    return (
        <div>
            <h1>Layout</h1>
            <p> ----------------------------- </p>
            {/* 默认展示Default，需要在路由配置中加上：index: true */}
            <Link to="/layout"> Default </Link> === 
            <Link to="/layout/board"> board </Link> === 
            <Link to="/layout/article"> article </Link>
            <Outlet />
        </div>
    )
}
export default Layout

三、路由懒加载

路由配置
import { lazy, Suspense } from 'react';
const Layout = lazy(() => import('@/pages/Layout'));
const Login = lazy(() => import('@/pages/Login'));
const Book = lazy(() => import('@/pages/Book'));

[
    {
        path: '/',
        element: <Layout />
    },
    {
        path: '/login',
        element: <Suspense fallback={'加载中'}><Login /></Suspense>
    },
    {
        path: '/book',
        element: <Suspense fallback={'加载中'}><Book /></Suspense>
    },
]