Question

这是一个设计问题。

所以我有一个看起来像这样的演示组件

    import React, { Component } from "react";
import Button from "../components/Button.js";

export default class CreateTestButton extends Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.createTest({ userId: "some_id" });
  }

  render() {
    return (
      <div className="CreateTestButton">
        <Button
          loading={this.props.testInProgress}
          label="Create Test"
          height={40}
          width={100}
          onClick={() => this.handleClick()}
        />
      </div>
    );
  }
}

我有一个看起来像这样的容器

import { connect } from "react-redux";
import { createTest } from "../actions/tests.actions.js";
import CreateTestButton from "../components/CreateTestButton.js";
import { withRouter } from "react-router-dom";

const mapDispatchToProps = dispatch => {
  return {
    createTest: userIdObj => {
      dispatch(createTest(userIdObj));
    }
  };
};

const mapStateToProps = state => {
  return {
    loading: state.testInProgress
  };
};

const CreateTestContainer = connect(mapStateToProps, mapDispatchToProps)(
  CreateTestButton
);

export default CreateTestContainer;

我想路由到将使用CreateTestContainer的处理程序。然后，我希望CreateTestButton能够推送到历史记录对象（特别是tests/:id

我知道我必须使用withRouter，但我不知道在哪里。我已经想到了这些方法

拥有一个使用容器的React组件并返回withRouter。然后我将一个函数传入我的Container，这将是对历史对象的推送tests/:id。
将withRouter与Container一起使用，并使用ownProps传递历史记录对象，以便进行推送。

哪个更好？什么方法是好的做法？

注意我正在使用redux，但我不想使用react-router-redux。

使用高阶REDX组件反应路由器v4

0 个答案: