React Router v4 with Higher Order redux components

Question

This is a design question.

So I have a presentational component that looks like this

    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>
    );
  }
}

I have a container that looks like this

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;

I want to route to a handler that will use CreateTestContainer. I then want CreateTestButton to be able to push to the history object (specifically tests/:id

I understand that I have to use withRouter, but I'm not sure where. I've thought of these approaches

1. Have a React component that uses the container and is returned withRouter. I then pass in a function into my Container that will be the push tests/:id to the history object.

2. Use withRouter with the Container and use ownProps to pass in the history object so that a push can happen.

Which is better? What approach is good practice?

Note I'm using redux, but I don't want to use react-router-redux.