当前位置：首页 > news >正文

react react-router-dom中获取自定义参数v6.4版本之后

news 来源：原创 2025/6/14 6:40:19

路由配置, AutnToken 组件作为权限、登录管理

import { createBrowserRouter, Navigate } from 'react-router-dom';
import Layout from '@/layout/index';
import Login from '@/pages/login';
import Page404 from '@/pages/404';import AutnToken from '@/components/authToken';
import { lazy } from 'react';
import withLoading from "@/components/router/withLoading";
import product from './product';
let router1:any=[
{path: '/',element: <Navigate to="/home" replace />,},{path: '/',element: (<AutnToken><Layout /></AutnToken>),children: [{path: 'home',element: withLoading(lazy(() => import("@/pages/home"))),handle: {title: "首页",},},...product,{path: 'userAdmin',element: withLoading(lazy(() => import("@/pages/user"))),children: [{path: 'userList',handle: {title: "用户列表",},element:withLoading(lazy(() => import("@/pages/user/userList"))),},],},],},{path: '/login',element: withLoading(lazy(() => import("@/pages/login"))),},{path: '*',element: withLoading(lazy(() => import("@/pages/404"))),}
]
export const router = createBrowserRouter([...router1]);

main.tsx

import { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.scss'import { BrowserRouter, RouterProvider } from "react-router-dom";
// 添加如下import { Provider } from 'react-redux'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { ConfigProvider } from 'antd'
// type Locale = ConfigProviderProps['locale'];
import zhCN from 'antd/es/locale/zh_CN';  //引入中文包 
import { PersistGate } from 'redux-persist/integration/react'import {router} from "@/router/index"
import { storeData, persistor } from "@/store"
dayjs.locale('cn');
// 关闭严格模式
ReactDOM.createRoot(document.getElementById('root')!).render(<Provider store={storeData}><PersistGate loading={null} persistor={persistor}><ConfigProvider locale={zhCN}><RouterProvider router={router} /></ConfigProvider></PersistGate></Provider>
);

AutnToken

// components/authToken/index.tsx
import { Navigate, Outlet, useLocation, useMatches } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import { ReactNode } from 'react';
interface AutnTokenProps {children: ReactNode;
}
export default function AutnToken({ children }: AutnTokenProps) {const userData = useSelector((state: RootState) => state.getDataConfig);const { token } = userData;const location = useLocation();console.log(token,"判断是否登录，")if (!token && location.pathname !== '/login') {return <Navigate to="/login" replace />;}
//   判断是否有权  ----
const matches = useMatches();
const metas = matches.map((match:any) => {console.log(match,"路由信息--")})return <>{children}</>;
}