React - 更改可以在任何地方打开的模态的 URL

Question

我是 React 的新手，我被要求在一个基本完成的应用程序中实现这个功能。所以，我不想摧毁一切。

我有一个包含组件的模式 登录/注册/激活/密码恢复/密码重置 根据情况。此模式可以出现在每个公共页面上。可以在模式中导航从登录到注册，从登录到密码恢复，从密码重置到登录。 我们可以从标题中的链接以及通过站点的其他链接访问模态。模式将显示动画过渡。

我被要求根据显示的模态内容更改 URL。

网址必须是：

site.com/en/login 
site.com/en/register
site.com/en/activation
site.com/en/password-recovery
site.com/en/password-reset

即使 URL 已site.com/en/page1/info1/[...]，模式后面的页面也应保留，或者主页应在直接 URL 访问/刷新时默认显示在模式后面。

我在网上找到了很多这个拼图的碎片，但碎片似乎并不适合在一起。我只想知道完成这项任务的最佳方法。

我现在没有令人信服的代码可以显示。

如果这有帮助，它是一个在NodeJS服务器上使用JSX的React-Redux应用程序。

Answer 1

如果你的组件是通过路由器渲染的，你可以使用history.push()，否则你可以用react-router-dom的withRouter包装你的组件，然后使用history.push()，

import { withRouter } from 'react-router'
const myComponent = () => {
   ...
}
// by this history is  going to be available from props in this component
export default withROuter(myComponent) 

如果两者都不起作用，您仍然location浏览器window的对象，请尝试一下....

Answer 2

也许"历史"库可以轻松帮助您 https://www.npmjs.com/package/history

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.listen((location, action) => {
    // location is an object like window.location
    console.log(action, location.pathname, location.state)
})