1.下载oh-router 和 oh-router-react

1. yarn add oh-router oh-router-react

2.引入、定义路由

import { Router } from "oh-router";
export const router=new Router({
    // 路由配置
    routes : [
        {
        path:'/login',
        element: <Login/>
    },
        {
        path:'/',
        element: <Home/>
    },
        {
        path:'/user',
        element: <User/>
    },
        {
        path: '*',
        element: <Error/>
    },
]
})

3.入口文件main.ts

import { RouterView } from 'oh-router-react'
import React from 'react'
import ReactDOM from 'react-dom/client'
//这就是刚刚定义的路由
import { router } from './router'
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
  //使用路由
    <RouterView router={router} />
  </React.StrictMode>
)

4.创建 router/authwares/loginCheack.ts

 //导入上下文
import { Middleware, MiddlewareContext } from "oh-router";
import { router } from "..";
//导入设置token函数
import { getToken } from "../shared/token";


//创建路由类  Middleware固定写法
export class LoginChecked extends Middleware {
//ctx={to,from}
    async handler(ctx: MiddlewareContext<{}>, next: () => Promise<any>): Promise<void> {
        // 判断用户有没有登录
        const token = getToken();
        //判断去的是不是登录
        if( ctx.to.pathname ==='/login'){
        //判断是否登录
            if(token){
                router.navigate('/')
            }else{
                next()
            }
        }
        
        if (token) {
           next() 
          
        } else {
            router.navigate('/login')
        }

    }
   
}

5.router/index.ts

import { Router } from "oh-router";
//导入路由对象
import { LoginChecked } from "./authwares/loginCheack";
export const router=new Router({
//使用
 middlewares:[new LoginChecked()],
    // 路由配置
    routes : [
        {
        path:'/login',
        element: <Login/>
    },
        {
        path:'/',
        element: <Home/>
    },
        {
        path:'/user',
        element: <User/>
    },
        {
        path: '*',
        element: <Error/>
    },
]
})