时间戳

首页 > 解决方案 > 有没有办法在 url 更改时更新在单个 spa 中注册的应用程序的历史位置？

reactjs - 有没有办法在 url 更改时更新在单个 spa 中注册的应用程序的历史位置？

问题描述

我在 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 更改时更新历史记录？

标签： reactjsvue.jsreact-router-domhistorysingle-spa

解决方案

我没有找到如何更改历史记录，但我希望您修复一些语法错误。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>

推荐阅读