ReactJS：如何以编程方式将用户重定向到另一个页面？

Question

我有一个基本的ReactJS 4.0.1应用程序，该应用程序使用react-router-dom 5.0.1设置了路由。

我还有一个中间件，用于检查用户的会话时间是否已到期。从那里，我想简单地将用户重定向到登录页面。

我实际上只是想更改页面。如果在.net中，我会打电话给

return RedirectToAction("Index", model);

非常简单。

以前，要更改不同组件中的内容，我在render部分中有一个if语句，该语句将通过返回以下内容进行重定向：

<Redirect to={{ pathname: '/signin' }}/>

给用户。如果用户采取了触发该组件内代码的动作，则此方法有效，但是我要处理的逻辑在中间件中。

我尝试过 history.push，goto，location.push，store.push等... 我什么都不能工作。 通过中间件，我可以从redux访问商店。我该怎么办？

Answer 1

您可以使用history对象。只需导出history对象并调用history.push('some-page')。我在此处https://codesandbox.io/s/serverless-fire-1vihp

进行了演示

export const history = createBrowserHistory()

并将历史道具传递给路由器

<Router history={history}>

在中间件文件中，只需调用history.push('some-page')。

另一种方法是使用react-router-redux，

之类的库