qiankun实现子应用切换到子应用传递参数

原创

已于 2024-03-24 19:55:08 修改 · 898 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-03-23 13:01:54 首次发布

qiankun实现子应用切换到子应用传递参数

qiankun 子应用切换到子应用

基座重写跳转方法基座 => App.tsx

import {
   
    useState } from 'react';
import './App.css';
import {
   
    Layout, Menu } from 'antd';
import {
   
    Link, Routes, Route } from 'react-router-dom';
import routes from './routes';
import Home from './pages/Home';

const {
   
    Sider, Header, Content } = Layout;

function App() {
   
   
  const currentPath = window.location.pathname; // 当前path
  // 当前选择菜单
  const [selectedPath, setSelectedPath] = useState(
    routes.find(item => currentPath.includes(item.key))?.key || ''
  );

  // 重写函数
  const _wr = function (type: string) {
   
   
    const orig = (window as any).history[type]
    return function () {
   
   
      const rv = orig.apply(this, arguments)
      const e: any = new Event(type)
      e.arguments = arguments
      window.dispatchEvent(e)
      return rv
    }
  }
  // 绑定事件
  window.history.pushState = _wr('pushState')

  // 在这个函数中做跳转后的逻辑
  const bindHistory = () => {
   
   
    const currentPath = window.location.pathname;
    setSelectedPath(
      routes.find(item => currentPath.includes(item.key))?.key || ''
    )
  }

  // 绑定事件
  window.addEventListener('pushState', bindHistory)

  return (