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'

在操作收到服务器的响应并调度响应后，监听服务器的响应是否可用并在渲染函数中返回重定向

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 and if（responseFromServer）{`将被跳过而不被重定向。

Answer 2

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

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

我如何使用React-Router-Redux处理不同页面的操作和路由？

2 个答案: