Lo que sucede es que al final cuando eso hace render, te queda una estructura similar a esta:
<a href="/Dashboard">
<button>Finalizar</button>
</a>
Y es sencillo lo que sucede, ambos son objetos de acción, ya que al hacer click en teoría cada uno hace una acción de acuerdo a lo que está predeterminado. Pero si uno está jerárquicamente debajo del otro, entonces viene la pregunta, si le haces click a uno, posiblemente no se lo hagas al otro. Y esa es la razón de por qué no cuando quitas uno funciona de otra forma, pero cuando están los dos no tienes el comportamiento que deseas.
Para ello, solucionarlo es sencillo. Simplemente trata de mantener la lógica de lo que quieres hacer, pero con un solo elemento de acción, por ejemplo, que quede solamente así:
<button onClick={this.finalizar.bind(this)}>Finalizar</button>
// En tu función
finalizar(e) {
// realizas tu acción de envíar los datos, y al final redireccionas
...
this.props.history.push({to: '/Dashboard'});
}
Cabe resaltar, que esto es lo poco que puedo ayudarte de acuerdo a la información que das, estoy suponiendo que de por sí debes tener una función encargada de enviar los datos al servidor, y que lo estás haciendo por medio de AJAX. De no ser así y que tu formulario se esté recargando cada que le das al botón de finalizar, entonces la re-dirección debes hacerla desde el servidor
Otra nota, es que para que esto funcione, el componente donde tienes la función con el this.props.history.push
debería ser un hijo directo del router, para que este le pase las propiedades necesarias, entre esas history
. Pero de no ser así puedes encapsular tu componente con esta función llamada withRouter
quedando algo así:
Tu archivo
// tus imports ...
// import { withRouter } from 'react-router';
class MyComponent extends Component { ... }
export default withRouter(MyComponent);
Puede ser en el export, el punto es que con esa función le das el contexto necesario a tu componente para trabajar con el router