Question

我是React的新手，我被要求在完成的App中实现此功能。所以，我不想破坏一切。

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

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

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()，否则您可以使用withRouter中的react-router-dom包装组件，然后使用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

http://myjenkins.server.com/

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

2 个答案: