有没有办法用相对链接“打破”反应应用程序?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (77)

语境

我们有2个不同的React JS应用程序,它们都部署在代理之后。

代理服务于根/位置上的一个应用程序(让我们称之为主页)。它在子路径上服务于另一个,例如/应用-A /。因此两者都在同一个域上,例如https://my-site.com/和https://my-site.com/application-a/

如果我打开2个新的浏览器窗口并直接导航到/和另一个直接导航到/ application-a /,这非常有用。

当我可能想在根路径应用程序(主页)中使用HTML标记并使用相对href将其链接到运行在/ application-a / subpath的应用程序时,就会出现问题。

在这种情况下,我相信路由器开始并希望这是在本地应用程序中的路由。我想尝试“逃避”或“突破”反应路由器。

可能的解决方案

  1. 我认为如果根应用程序中的锚标记href具有_blank的目标属性值,则可以正常工作 - 但这是不合需要的,因为它会强制加载新选项卡。
  2. 如果我使用绝对URL作为href值,那么我认为它将“逃离”SPA并在同一个选项卡中访问新页面。听起来不错 - 但现在我必须使用绝对URL,这使得代码在dev / staging / live等之间的可移植性降低。
  3. 在路由器中为/ application-a /明确地放置匹配路由并以编程方式更改window.location?我可以看到这可能有用,但对我来说感觉很乱。

问题

有没有办法我可以使用好的老式锚标签,并可能提供某种类型的属性,告诉反应路由器“让我一个人”,让我在静态HTML /非SPA中表现得像一个“常规”锚/非React JS页面。如果没有,任何其他建议表示赞赏。

类似未解决的问题:在同一主机上导航出反应路由器单页应用程序

提问于
用户回答回答于

你可以使用HashRouter代替吗?https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md URL不会“漂亮”,但应该可以使用。

或者,如果当前URL与任何路由定义不匹配,则可以将用户重定向到另一个应用程序,例如:

<Route render={() => (<Redirect to="http:/full-url-to/other-app" />)}/>

在所有其他路由定义之后,只有在没有其他路由匹配时才匹配。

关于不同环境之间的可移植性(staging,live,...),请考虑您也可以使用Webpack DefinePlugin在构建时设置变量,这样您就可以动态传递基本URL。

扫码关注云+社区

领取腾讯云代金券