如何使用React路由器点击按钮从一个组件导航到另一个组件

Question

我想使用react-router-dom来浏览我的网站
每当onClick激活到下一个组件的切换时，每个组件都将呈现<button>。

主组件Login.js将包含其内部的所有4个组件。我需要知道有什么方法。
(第一次用户无论如何都不能跳过下面的登录过程(

import React, { Component } from 'react';
import {
BrowserRouter as Router,
Redirect,
Route,
Switch,
} from 'react-router-dom';
import MobileNum from './MobileNum.jsx';
import IdNumber from './IdNum.jsx';
import userEmail from './userEmail';
import CreatePass from './createPassword .jsx';
class Login extends Component {
render() {
return (
<div>
<button  onClick={}></button>
</div>
);
}
}

Answer 1

要重定向要在历史对象上调用push的用户。要在类组件中获取历史对象，可以使用withRouter高阶组件，例如

class Login extends Component {
render() {
const { history } = this.props;
return (
<div>
<button onClick={() => history.push('foo')}>Login</button>
</div>
);
}
}
export const LoginWithRouter = withRouter(Login);

来源：https://dev.to/kozakrisz/react-router---how-to-pass-history-object-to-a-component-3l0j