hash路由对应hash路由

[aide-cloud]

基座应用和主应用都是creat-react-app创建的，路由采用的是react-router-dom 6.2.1
在当前环境中，怎么实现主应用为hash路由，子应用也为hash路由的跳转呢？
直接采用navigate(data.path as string, { replace: true })方式，在子应用第一次进入能够跳转成功，但是当再次访问该路由，旧提示找不到路由了
子应用代码

// 此组件用于监听基座下发的跳转指令
const NavigatorFromBaseApp = () => {
  const navigate = useNavigate()

  useEffect(() => {
    // navigate('/page1', { replace: true })
    console.log('getData():', window.microApp.getData())
    window.microApp?.addDataListener((data: any) => {
      // 当基座下发path时进行跳转
      navigate(data.path as string, { replace: true })
    }, true)
  }, [navigate])

  return null
}

function App() {
  return (
    <div className='App'>
      <h1>user-app</h1>

      <HashRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
        <NavigatorFromBaseApp />
        <Routes>
          <Route path='/page1' element={<h1>page1</h1>} />
          <Route path='/page2' element={<h1>page2</h1>} />
        </Routes>
      </HashRouter>
    </div>
  )
}

主应用代码

const App = () => {
  return (
    <HashRouter>
      <Routes>
        {ServersMap.map((item: MicroServerType, index: number) => (
          <Route
            path={'/' + item.name}
            key={index}
            element={
              <ChildPage
                name={item.name}
                url={item.url}
                baseroute={item.baseroute}
              ></ChildPage>
            }
          />
        ))}
      </Routes>
    </HashRouter>
  )
}

const ChildPage: React.FC<MicroServerType> = (props: MicroServerType) => {
  const [microAppData, changeMicroAppData] = useState({ msg: '来自基座的数据' })

  function handleCreate() {
    console.log('child-react17 创建了')
  }

  function handleBeforeMount() {
    console.log('child-react17 即将被渲染')
  }

  function handleMount() {
    console.log('child-react17 已经渲染完成')

    setTimeout(() => {
      changeMicroAppData({ msg: '来自基座的新数据' })
    }, 2000)
  }

  function handleUnmount() {
    console.log('child-react17 卸载了')
  }

  function handleError() {
    console.log('child-react17 加载出错了')
  }

  function handleDataChange(e: CustomEvent) {
    console.log('来自子应用 child-react17 的数据:', e.detail.data)
  }

  return (
    <micro-app
      name={props.name}
      url={props.url}
      baseroute={props.baseroute}
      data={microAppData}
      onCreated={handleCreate}
      onBeforemount={handleBeforeMount}
      onMounted={handleMount}
      onUnmount={handleUnmount}
      onError={handleError}
      onDataChange={handleDataChange}
    ></micro-app>
  )
}

[Crazymuyang]

• 实际的路由跳转应该通过子应用完成，同时将跳转信息发送给主应用，主应用根据信息，结合 window.location 改变视图；

• 假如路由切换由主应用发起，同理，应该通知到对应的子应用，在子应用中完成实际路由切换；