【React+Typescript+Antd】全局路由跳转

React在Typescript里的路由跳转示例：

第一步，设置路由配置文件（示例在routeMap.ts文件中配置）。

第二步，在页面中根据不同情况对页面路由进行引用（见AuthHOC.tsx）

第三步，在APP中引用路由页面（见：APP.tsx）

1、APP.tsx

代码语言：javascript复制

import React from 'react';
import {BrowserRouter as Router, Switch} from 'react-router-dom'
import {routerConfig} from './router/routeMap'

import './App.less';
import {observer} from "mobx-react-lite";
import {AuthHOC} from "./router/AuthHOC";

const App: React.FC = () => {
  return (
    <Router basename={
      process.env.NODE_ENV === 'production' ? '/web' : ''
    }>
      <Switch>
        <AuthHOC config={routerConfig} />
      </Switch>
    </Router>
  );
}

export default observer(App);

2、routeMap.ts

代码语言：javascript复制

// routeMap.js
// 全局路由配置

import {Index} from '../pages/Index'
import {Login} from '../pages/login/Login'
import {NotFound} from '../pages/notfound/NotFound'
import {Auth} from "../pages/auth/Auth";
import ARLayout from '../components/ARLayout';
import CodeReview from '../pages/CodeReview/CodeReview';
import {TeamConfig} from '../pages/teamconfig/TeamConfig';
import MainPage from '../pages/main/MainPage';
import {ConsolePage} from "../pages/console/Console";

export interface RouterConfigModel {
  path:string,
  component?:any,
  auth?:boolean,
  regexp?: RegExp,
}

export const routerConfig:RouterConfigModel[] =  [
  {path: '/login', component: Login, auth: false},
  {path: '/auth/callback/:platform', component: Auth, auth: false, regexp: //auth/callback/. ?/?/},
  {path: '/mainView', component: ARLayout, auth: false},
  {path: '/codeReview', component: CodeReview, auth: false},
  {path: '/tsconfig', component: TeamConfig, auth: false},
  {path: '/mainPage', component: MainPage, auth: false},

  // console page
  {path: '/console/k789ashdd2l5c', component: ConsolePage, auth: false},


  // 以下页面需要认证
  {path: '/', component: Index, auth: true},

  // 404页面
  {path: '/404', component: NotFound, auth: false}
]

3、AuthHOC.tsx

代码语言：javascript复制

import * as React from 'react';
import { Route,Redirect } from 'react-router-dom';
import { propsModel } from './authHOC.model'
import {RouterConfigModel} from "./routeMap";

export class AuthHOC extends React.Component<any,propsModel>{
  render(){
    const { location, config } = this.props;
    const { pathname } = location;

    const isLogin = localStorage.getItem('__aurochs_token')
    let routePath = pathname
    const targetRouterConfig = config.find((v: RouterConfigModel) => {
      // 支持隐式传参
      // 如果有正则，优先匹配正则
      if (v.regexp && pathname.match(v.regexp) != null) {
        routePath = v.path
        return true
      }
      // 其他情况直接进行比较
      return v.path === pathname
    });
    if(targetRouterConfig && !targetRouterConfig.auth && !isLogin){
      const { component } = targetRouterConfig;
      return <Route exact path={routePath} component={component} />
    }

    if(isLogin){
      // 如果是登陆状态，想要跳转到登陆，重定向到主页
      if(routePath === '/login'){
        return <Redirect to='/mainView' />
      }else{
        // 如果路由合法，就跳转到相应的路由
        if(targetRouterConfig){
          return <Route path={routePath} component={targetRouterConfig.component} />
        }else{
          // 如果路由不合法，重定向到 404 页面
          return <Redirect to='/404' />
        }
      }
    }else{
      // 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
      if(targetRouterConfig && targetRouterConfig.auth){
        // return <Redirect to='/login' />
        return <Redirect to='/mainView' />
      }else{
        // 非登陆状态下，路由不合法时，重定向至 404
        return <Redirect to='/404' />
      }
    }
  }
}

typescript

0 人点赞