0

这是我的用例：

在 WelcomeScreen 我有这样的代码：

class WelcomeScreen extends Component {
  render() {
    const {
      checkoutState,
    } = this.props;

    if (checkoutState.status === TRYING_TO_BUY) {
      return this.renderPurchaseForm(plan);
    }

    return this.renderWelcome();
  }

当用户访问时/welcome，他可以点击购买按钮，该按钮将发送一个动作并将其设置checkoutState.status为TRYING_TO_BUY。将Welcome通过调用重新呈现renderPurchaseForm

在 内renderPurchaseForm，它将呈现一个ArticlePurchaseBlock

  renderPurchaseForm() {
    const { articleId } = this.props;
    return (
    <ArticlePurchaseBlock
       articleId={articleId}
    /> 
    )

在块中，该类将尝试更新 url 以反映它在输入表单中

import { withRouter } from 'react-router';

class ArticlePurchaseBlock extends Component {

  componentWillMount() {
    const { history } = this.props;
    history.push(URL_BUY_ARTICLE);
  }

    render() {
    // render a redux-form
    }
}
export default withRouter(ArticlePurchaseBlock);

你可以看到history.push(URL_BUY_ARTICLE);被调用componentWillMount。

现在的问题是：当用户在购买表单中，如果用户想回到之前的 url ( /welcome) ，他不能。这是因为 的 状态checkoutState.status是 静止的TRYING_TO_BUY。欢迎总是呈现给表单。

我可以在哪里ArticlePurchaseBlock监视返回事件并取消设置状态？redux-saga-router由于时间限制，我不打算使用。

我正在使用react-routerv4

4

1 回答 1

1

我为这个确切的问题设计了一个路由器。使用 react-router 太难了。 https://github.com/cellog/react-redux-saga-router。对于您的代码：

https://gist.github.com/cellog/0731f7e1ba8f9009f6b208c2bd15aa16

整个事情可以在 1 行代码中完成，并且您的路由看起来几乎与 react-router 相同，还有 1 行用于将参数或 url 更改映射到操作。

于 2017-03-27T04:40:45.057 回答