当前位置: 首页 > 面试题库 >

使用带有action-router-v4的动作创建者中的history.push吗?

秦奇
2023-03-14
问题内容

我发现无需使用完成react-router-redux路线即可解决此问题的唯一工作方法action creator async action是将history道具从组件传递给动作创建者,然后执行以下操作:

history.push('routename');

由于BrowserRouter忽略传递给它的历史记录道具,因此我们不能将自定义历史记录对象与Browserhistory一起使用。

解决此问题的最佳方法是什么?


问题答案:

除了使用之外,BrowserRouter您可以使用Router带有自定义历史记录的

import { Router } from 'react-router'

import createBrowserHistory from 'history/createBrowserHistory'

export const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

在这种情况下,您history.push()会工作。使用BrowserRouter
history.push无效,因为创建新的browserHistory无效,因为<BrowserRouter>创建了自己的历史实例,并侦听该实例的更改。因此,其他实例将更改url,但不会更新<BrowserRouter>

创建自定义后history,您可以将其导出,然后将其导入您的文件中,action creator并使用它像

import { history } from '/path/to/index';

const someAction = () => {
    return dispatch => {
        ApiCall().then((res) => {
            dispatch({type: 'SOME_CALL', payload: res })
            history.push('/home');
        })
    }
}


 类似资料:
  • 在React Router v4中,如何使用传递参数?

  • 问题内容: 我正在使用。我感到困惑的是,当我单击组件时,路线会立即更改。我想在获取数据之前停留在当前路线,而不是先切换路线再获取数据。我发现其中有一个钩子,但现在在中,它已被弃用。那么,如何在单击组件之后以及更改路线之前立即获取数据? 例: 它是:在->单击->获取数据以进行->渲染 不:在->单击->渲染->获取数据->重新渲染 问题答案: 在中,您可以使用prop 来替换其中现有的功能 假设您

  • 我在应用程序中使用了进行路由。在主页中,有一个表单。当用户填写表单并点击submit按钮时,操作将被调度(ShowResultToFar),并应重定向到结果页面,该页面不是主页中的子页面,而是一个从上到下具有不同UI的不同页面。 我试图这样做,但行动没有分派只有路由已经过渡,但显示相同的主页,而不是新页面(结果) index.js app.js form.js(它是横幅的子组件,是应用程序的子组件

  • 问题内容: 我对React还是比较陌生,我正在尝试弄清楚如何使React路由器正常工作。我有一个超级简单的测试应用程序,看起来像这样: 当我运行该应用程序时,home组件加载没有任何麻烦,并且当我单击“ Click Me”链接时,URL更改为localhost / about,但是什么也没有发生。如果单击刷新,则会显示“无法获取/关于”。显然我在做错事,但我一直无法弄清楚是什么。我也在使用Webp

  • 我试图结合反应路由器v4,反应,和redux。因为react-router跟踪URL,所以我选择将该状态块排除在redux模型之外。 但我仍然需要一种方法来在react路由器发生路由更改时调度redux操作。哪里是最好的地方? 我的第一次尝试是将它放在react路由器链接的onClick属性中: 其思想是,当用户单击链接时,dispatchAction()将更新redux状态,然后加载相册组件。

  • 问题内容: 我目前正在使用React Router v4来嵌套路由。 最接近的示例是React-Router v4文档中的route配置 。 我想将我的应用分为2个不同的部分。 前端和管理区域。 我在想这样的事情: 前端的布局和样式与管理区域不同。因此,在首页中,回家的路线大约应该是子路线。 / home 应该呈现在Frontpage组件中, / admin / home 应该呈现在Backend