Question

我在同一服务器上安装了2个不同的ReactJS项目。它们位于不同的目录结构中：

/var/www/myapps/app1 -> My 1st application
/var/www/myapps/app2 -> My 2nd application

我正在使用nginx作为Web服务器。

两个应用程序都具有相同的react-router结构：

<BrowserRouter basename={baseName}>
    <Switch>
        <Route exact path="/logout" component={Logout} />
        <Route exact path="/auth" component={Logout} />
        <Route exact path="/" component={NavComponent} />
        <Route exact path="/:screen" component={NavComponent} />
        <Route
            exact
            path="/:screen/:action"
            component={NavComponent}
        />
        <Route
            exact
            path="/:screen/:action/:id"
            component={NavComponent}
        />

        <Route component={PageNotFoundError} />
    </Switch>
</BrowserRouter>

baseName的更改是app1（第一个应用程序）或app2（第二个应用程序）。

两个应用程序均具有使用react-router-v4 withRouter()包装函数进行导航的组件。这些组件使用： this.props.history.push("/whatever")或this.props.history.push(0)或this.props.history.push(-1)。

我还具有使用windows.location = "/app1/whatever"或window.location = "app2/whatever"

在应用程序之间更改的组件（如按钮）

我遇到的奇怪错误是按下一个从一个应用程序切换到另一个应用程序的按钮之后。顺序排列：

用户加载app1并使用各种功能在其中导航-很好
用户单击按钮以更改为app2（此按钮使用windows.location功能）-一切正常
用户使用app2在this.props.history.push("/whatever")内导航-很好
用户单击某个app2屏幕的刷新按钮（使用this.props.history.go(0)）-中断，试图在老应用程序上下文中加载单击的链接。

似乎window.location之后，路由器历史变得混乱，甚至加载了新路由器。

在2个react-router-v4项目之间导航

0 个答案: