我应该如何使用 React-Router-Redux 处理 Actions 和 Routing 到不同的页面？

Question

我不认为我完全理解如何利用 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 更改并加载不同的组件。但是，例如，我如何以编程方式处理某个 Action 之后的组件更改？我有一个调用服务器的操作，操纵状态，然后最终应该重新路由到一个新的组件。如何处理这个？

Answer 1

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

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

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

根据您的评论更新

我会在关于我们的部分中这样做。

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) {` 将被跳过并且不会被重定向。

Answer 2

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

另请参阅此示例以获得更清晰的信息。 ReactRouterAuth Example

我应该如何使用 React-Router-Redux 处理 Actions 和 Routing 到不同的页面？

How am I supposed to handle both Actions and Routing to different page with React-Router-Redux?

reactjs

react-redux

react-router-redux