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

Question

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

我有一个根据情况包含组件login/register/activation/password-recovery/password-reset的模式。这个模式可以出现在每个公共页面上。可以在从登录到注册、从登录到密码恢复、从密码重置到登录的模式中导航。我们可以从他的标题中的链接和通过网站的其他链接访问模式。显示模式时会显示动画过渡。

我被要求根据显示的模式内容更改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/[...]，模式后面的页面也应该保留，或者在直接访问/刷新时，主页应该默认显示在模式后面。

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

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

如果这能有所帮助，那就是在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) 

如果这两个都不起作用，你仍然有来自浏览器左侧window的location对象，试一下……

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)
})