1

我在 single-spa 中有两个应用程序，一个在 React 中，另一个在 Vue 中。React 应用程序使用历史库进行导航。下面给出的是我的 React 应用程序文件：

历史.js

import { createBrowserHistory } from 'history'

export const history = createBrowserHistory({
    basename: '/myapp,
    forceRefresh: true 
})

应用程序.js

import React, {Component} from 'react';
import { Router, Switch, Route } from 'react-router-dom';
import history from ‘../history.js’; 

class App extends Component {
   constructor(props){
     super(props);
   }

   render(){
       return (
           <Router history={history}>  
             <Switch>
               <Route exact path="/user" component={User} />
               <Route exact path="/" component={Home} />
             </Switch>
           <Router />
      )
  }
}

我在以下情况下遇到问题：

  1. 我在 React 应用程序的路径 https://localhost:3000/myapp/user 并切换到 Vue 应用程序（使用导航栏菜单）。
  2. 现在，当我切换回 React 应用程序时，url 显示 https://localhost:3000/myapp 理想情况下应该加载我的 Home 组件。
  3. 但是现在历史仍然有旧的位置（https://localhost:3000/myapp/user），然后加载旧的用户组件。

有没有办法在 url 更改时更新历史记录？

4

2 回答 2

0

我没有找到如何更改历史记录，但我希望您修复一些语法错误。Meybe 修复错误可以帮助您。

历史.js

export const history = createBrowserHistory({
    basename: '/myapp, // basename: '/myapp',
    forceRefresh: true 
})

应用程序.js

<Switch>
    <Route exact path="/user" component={User} /> // <Route path="/user" component={User} />
    <Route exact path="/" component={Home} />
</Switch>
于 2021-06-29T18:49:36.890 回答
0

我认为这归结为让路由机制协同工作。这是一个有趣的问题，我有两个可行的想法：

思路一：刷新页面

如果你完全重新加载没问题，那么每当你在 Vue 和 React 之间切换时刷新浏览器可能会重置两个路由器中的状态，以便它们都读取它们加载的初始状态并继续。

我会通过window.location.href = '/myapp'在任何会导致转换到 React 的事件处理程序中分配来做到这一点。它应该重新加载浏览器并导航到该页面。如果您的反应应用程序正在该路径加载，这应该可以工作。

想法 2：使用createMemoryHistory并与 Vue 的路由器同步

react-router您可以将其传递给“内存路由器”，而不是提供“浏览器路由器” 。顾名思义，内存路由器将状态保存在内存中（而不是使用History API）。

我认为您可以将 Vue 路由器的事件连接到 react-router 的内存路由器，并像这样使它们同步。我认为您可以在 hooks 之后history.push调用Vue 的全局内部。

像这样的东西：

//  I have not tested this, take this as inspiration
const router = new VueRouter({/* ... */});
const history = createMemoryHistory({/* ... */});

router.afterEach(({fullPath}) => {
  history.replace(fullPath, {fromVueRouter: true});
});

history.listen(location => {
  if (location.state?.fromVueRouter) return;

  router.replace(location.pathname);
});
于 2021-06-29T18:50:05.057 回答