我应该如何使用 React-Router-Redux 处理动作和路由到不同的页面？答案

【问题标题】：How am I supposed to handle both Actions and Routing to different page with React-Router-Redux?我应该如何使用 React-Router-Redux 处理动作和路由到不同的页面？
【发布时间】：2018-01-21 17:25:12
【问题描述】：

我认为我没有完全理解如何利用 react-router-redux。我了解您可以使用：

<header>
    <Link to="/" className="nav-link">Home</Link>  
    <Link to="/about-us" className="nav-link">About Us</Link>
</header>

<main>  
    <Route exact path="/" component={Home} />
    <Route exact path="/about-us" component={AboutUs} />
</main>

通过单击链接，URL 会发生变化并加载不同的组件。但是，例如，在某个动作之后，我如何以编程方式处理组件的更改？我有一个调用服务器的动作，操纵状态，然后最终应该重新路由到一个新的组件。如何处理？

【问题讨论】：

我猜你可能需要看看这个stackoverflow.com/questions/44127739/…

标签： reactjs react-redux react-router-redux

【解决方案1】：

import { Redirect } from 'react-router-dom'

在动作接收到来自服务器的响应并发送响应后，侦听来自服务器的响应是否可用并在您的渲染函数中返回重定向

render () { 
  .... //render logic
if (responseFromServer) {
  <Redirect to='about-us' />
.... // rest of the render function and return statement
}

根据您的评论更新

我会在 about-us 组件中这样做。

const resetServerResponse = (serverResponse) => serverResponse = null // depends on typeof serverResponse could be empty string, bool or a set initial state.
......
dispatch(resetServerResponse)

因此，当您导航回根 / 时，responseFromServer is falsy andif (responseFromServer) {` 将被跳过而不是重定向。

【讨论】：

这非常有效，但是在被重定向后如何重置这个变量。如果我导航回原始组件，它会自动重定向我，因为 responseFromServer 变量在存储中仍然处于活动状态。
谢谢，这工作得很好，但经过其他一些搜索后，我实际上更喜欢以下解决方案，它允许在渲染方法之外进行重定向。 stackoverflow.com/a/42320249/177941

【解决方案2】：

如果您使用的是 react-router v4，您可以import { push } from 'react-router-redux' 并使用它在您的 actionCreator 中调度任何路由，例如 dispatch(push('/something'))。无需将其放入您的组件逻辑中。

请参阅此示例以获得更好的清晰度。 ReactRouterAuth Example

【讨论】：