react route v6 使用流程

安装 react-router-dom

npm install react-router-dom

创建路由配置文件

src/router/index.ts

HashRouter 和 BrowserRouter 两种模式选择

• HashRouter

// src/router/index.ts
import { useRoutes, Navigate } from 'react-router-dom'
import Login from '@/views/login/index'

interface MetaProps {
	keepAlive?: boolean;
	requiresAuth?: boolean;
	title: string;
	key?: string;
}

interface RouteObject {
	path?: string; // 路径
	element?: React.ReactNode; // 组件
	children?: RouteObject[]; // 子路由
	meta?: MetaProps; // 配置
	caseSensitive?: boolean; // 是否大小写敏感
    redirect?:string; // 重定向
    preload?:Function; // 用于在路由匹配之前加载数据或执行其他操作
    defer?:boolean; // 是否延迟加载
    location?:string; // 可以指定一个初始的位置对象，用于服务器端渲染等场景
    sensitive?:boolean; // 指定路由路径是否敏感
}

const routers: RouteObject[] = [
    {
        path: '/',
        element: <Navigate to='login' />
    },
    {
        path: '/login',
        element: <Login />
    }
])

const Router = () => {
    const route = useRoutes(routers)
    return route
}

export default Router

// App.tsx

import { HashRouter } from "react-router-dom";
import Router from "@/routers/index";

<HashRouter>
    <Router></Router>
</HashRouter>

• BrowserRouter

// src/router/index.ts
import { createBrowserRouter } from 'react-router-dom'

const router = createBrowserRouter([
    {
        path: '/',
        element: <App />,
        children: routersChildren
    }
])

export default router

// main.tsx
import { RouterProvider } from 'react-router-dom';
import router from './router';

 <React.StrictMode>
   <Provider store={store}>
     <RouterProvider router={router}></RouterProvider>
   </Provider>
 </React.StrictMode>