问题描述
问题的具体描述
复现步骤
独立运行子页面切换没有问题。
但是在主体框架中切换页面报错。
`
import { lazy, Suspense, useEffect } from 'react'
import { HashRouter, Link, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
import Home from './pages/home/home'
const Page2 = lazy(() => import('./pages/page2/page2'))
// 此组件用于监听基座下发的跳转指令
const NavigatorFromBaseApp = () => {
const navigate = useNavigate()
const location = useLocation();
useEffect(() => {
// 定义具名监听函数（确保引用稳定）
const handleMicroAppRoute = (data: Record<string, unknown>) => {
if (typeof data.path === 'string' && data.path !== location.pathname) {
navigate(data.path);
}
};
// 添加监听
window.microApp?.addDataListener(handleMicroAppRoute);
// 组件卸载时移除监听
return () => {
window.microApp?.removeDataListener(handleMicroAppRoute);
};
}, [navigate, location.pathname])
return null
}
function App() {
// 子应用内部跳转时，通知侧边栏改变菜单状态
function onRouteChange(): void {
if (window.MICRO_APP_ENVIRONMENT) {
// 发送全局数据，通知侧边栏修改菜单展示
window.microApp.setGlobalData({ name: window.MICRO_APP_NAME })
}
}
return (
// 因为child-react17子应用是hash路由，主应用为history路由，所以不需要设置基础路由__MICRO_APP_BASE_ROUTE__
{/* 导航菜单 */}
Home
|
Page2
{/* 来自基座应用的导航器 */}
<NavigatorFromBaseApp />
{/* 路由系统 */}
<Routes>
{/* 公共路由 */}
<Route path="/" element={<Home />} />
<Route
path="/page2"
element={
<Suspense fallback={<PageLoading />}>
<Page2 />
</Suspense>
}
/>
{/* 错误处理路由 */}
<Route path="/404" element={<NotFound />} />
<Route path="*" element={<Navigate to="/404" replace />} />
</Routes>
</HashRouter>
)
}
// 加载状态组件
function PageLoading() {
return
🌀 Loading...
;
}
// 404 页面
function NotFound() {
return (
404 - Page Not Found
);
}
export default App
`
上传截图
请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。
复现仓库
请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。
环境信息
- micro-app版本：1.0.0-rc.24
- 主应用前端框架&版本："react": "^18.2.0",
- 子应用前端框架&版本："react": "^19.1.0",
- 构建工具&版本：node.js 22
问题描述
复现步骤
`
import { lazy, Suspense, useEffect } from 'react'
import { HashRouter, Link, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
import Home from './pages/home/home'
const Page2 = lazy(() => import('./pages/page2/page2'))
// 此组件用于监听基座下发的跳转指令
const NavigatorFromBaseApp = () => {
const navigate = useNavigate()
const location = useLocation();
useEffect(() => {
// 定义具名监听函数（确保引用稳定）
const handleMicroAppRoute = (data: Record<string, unknown>) => {
if (typeof data.path === 'string' && data.path !== location.pathname) {
navigate(data.path);
}
};
}, [navigate, location.pathname])
return null
}
function App() {
// 子应用内部跳转时，通知侧边栏改变菜单状态
function onRouteChange(): void {
if (window.MICRO_APP_ENVIRONMENT) {
// 发送全局数据，通知侧边栏修改菜单展示
window.microApp.setGlobalData({ name: window.MICRO_APP_NAME })
}
}
return (
// 因为child-react17子应用是hash路由，主应用为history路由，所以不需要设置基础路由__MICRO_APP_BASE_ROUTE__
{/* 导航菜单 */}
Home
|
Page2
)
}
// 加载状态组件
function PageLoading() {
return
}
// 404 页面
function NotFound() {
return (
404 - Page Not Found
);
}
export default App
`
上传截图
复现仓库
环境信息