新版本的React+vite 配置路由 和 路由权限

首先配置路由： 我得路由文件放在了src下 与app.tsx目录同级 这里只需要index.tsx即可 哪个私密路由也就是ProvateRouter.tsx文件配置半天都报错解决了一天没解决 然后就丢在这改天在解决
本来私密路由来管理路由 结果配置一直出错 然后就用自己的方法来解决了

不多比比 直接贴代码

//index.tsx
import React, { lazy } from "react";	//lazt 路由懒加载
import { Navigate} from "react-router-dom";
import { Spin } from "antd";
// import PrivateRoute from "@/routers/PrivateRoute";   //私密路由

const Login = lazy(() => import('@/view/Login'));  //登录
const Null404 = lazy(() => import('@/components/404'));    //404页面
const Layout = lazy(() => import('@/view/Layout'));        //布局排版
const Home = lazy(()=>import('@/view/Home'));           //首页


//后台管理操作
const AdminOperate = lazy(()=>import('@/view/Admin/AdminOperate')) //用户管理

// 懒加载  一旦调用 加载过慢  就加载antd里面的加载动画
const LoadingFun = (com: JSX.Element) => (
    <React.Suspense fallback={<div className="loading"><Spin size="large" /></div>}>
        {com}
    </React.Suspense>
);

const routes = [
    {
        path:'/',
        element:<Navigate to="/home" replace/>
    },
    {
        path: '/',
        element: LoadingFun(<Layout />),
        items:[
            //路由嵌套
            { path: '/home', element: LoadingFun(<Home />)},	//这里调用了懒加载函数
            {path: '/admin/adminOperate',element: LoadingFun(<AdminOperate />)}
        ]
    },
    {
        path: '/login',
        element: LoadingFun(<Login/>)
    },
    {
        path: '/*',
        element: LoadingFun(<Null404 />)
    }
]


export default routes;

//main.tsx
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import '@/components/style/global.scss'
import 'reset-css'
import {BrowserRouter} from "react-router-dom";

//切换中文
import { ConfigProvider } from "antd";
import zhCN from 'antd/es/locale/zh_CN'
import 'antd/dist/reset.css'

//状态管理
import {Provider} from "react-redux";
import store from "@/store/store";


ReactDOM.createRoot(document.getElementById('root')!).render(
        <BrowserRouter>
            {/*<React.StrictMode>*/}
            <ConfigProvider locale={zhCN}>
                <App />
            </ConfigProvider>
            {/*</React.StrictMode>*/}
        </BrowserRouter>
)
 
//至关重要  配置页面  因为是后台管理 
/*
1、封装login和home的跳转页面
2、判断是否登录  登录直接进入home页面 也就是所谓的后台管理
3、根据token判断  这里是因为新开的项目 并没有接入接口  暂时用null 和 任意值 进行判断是否登录
如果token = null  就是未登录状态  如果是token = '1'  就是登录状态

*/
//App.tsx
import {useEffect} from "react";
import { useLocation, useNavigate, useRoutes} from "react-router-dom";
import routes from "@/routers";
import { ConfigProvider, theme} from "antd";
import {useSelector} from "react-redux";

//登录
function ToLogin() {
    const navigate = useNavigate()
    useEffect(()=>{
        navigate('/login')
    },[])

    return <div></div>
}
//首页
function ToHome(){
    const navigate = useNavigate()
    useEffect(()=>{
        navigate('/')
    })

    return <div></div>
}

//路由权限
function BeforeRouterEnter(){
    const outLet = useRoutes(routes)
    const token = '1'
    const location = useLocation()
    if (location.pathname === '/login' && token !== null){
        return <ToHome/>
    }
    if (location.pathname !== '/login' && token === null){
        return <ToLogin/>
    }
    return outLet
}

const App = () =>{
    const darkMode = useSelector((state:any)=>state.counter.darkMode)
    useEffect(()=>{
        const html = document.documentElement
        //初始化dark-mode
        // html.setAttribute('dark-mode','light-mode')
        //获取html 标签中的dark-mode属性值
        // const htmlDarkMode = html.getAttribute('dark-mode')
        //将dark-mode属性值改变
        html.setAttribute('dark-mode',darkMode ? 'dark-mode' : 'light-mode')
    },[darkMode])
    return (
        <div>
            <ConfigProvider
                theme={{
                    // 设置暗黑模式算法
                    algorithm: darkMode ? theme.darkAlgorithm : undefined,
                }}
            >
                <BeforeRouterEnter/>
            </ConfigProvider>
        </div>
    )
}

export default App