react router

/**
 * 项目入口 从这里开始运行
 */
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

import {RouterProvider} from 'react-router-dom' 
import router from './router';
import store from './store'
import { Provider} from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    // 状态
  <Provider store={store}>
    {/* 组件 */}
    <ConfigProvider locale={zhCN}>
        {/* 路由 */}
      <RouterProvider router={router}></RouterProvider>
    </ConfigProvider>
  </Provider>
);

router/index.js

import {createBrowserRouter} from 'react-router-dom'
import Home from '../page/Home';
import Login from '../page/Login';
import AuthRoute from "../components/AuthRoute"
const router = createBrowserRouter([
  { path: "/login", element: <Login /> },
  { path: "/home", element: <AuthRoute><Home /></AuthRoute>},
  { path: "/", element: <AuthRoute><Home /></AuthRoute>},
]);

export default router

AuthRoute 组件

import myUtil from "../../util"
import {Navigate} from 'react-router-dom'
/**
 * 
 * @param {  } Children  需要验证组件
 * @returns 
 */
function AuthRoute({children}){
   const token = myUtil.getToken()
   console.log(token)
   if(token){
        return (
            <>
            {children}
            </>
        )     
   }else{
        return (<Navigate to={"/login"} replace />)
       
   }
}

export default AuthRoute