单击注册按钮时打开一个新组件

Question

以新页面打开，单击按钮时用户会进入页面。我该如何在反应功能组件中做到这一点？单击按钮时，我想从Register导航到另一个MyProfile组件。Register组件的代码如下：

import React, { useState } from 'react'
import './Register.css'
import axios from 'axios'
import { useHistory } from 'react-router-dom'

function Register() {
const history = useHistory();
const [data, setData] = useState({
name: "",
email: "",
password: "",
confirmpassword: "",
});
const register = (e) => {
e.preventDefault();
history.push("/myprofile")
}
const InputEvent = (event) => {
const { name, value } = event.target;
setData((preVal) => {
return {
...preVal,
[name]: value,
};
});
};
const formSubmit = (e) => {
e.preventDefault();
};
return (
<div className="signup__container">
<div className="signup__containerInfo">
<h1 className="h1__swari">swari</h1>
<hr />
</div>

<form4 onSubmit={formSubmit}>
<h5 className="h5__form"> Name</h5>
<input type="text" placeholder="Full Name"  name="name" value={data.name} onChange={InputEvent} />
<h5 className="h5__form"> Email-Address </h5>
<input type="Email" placeholder="Email" name="email" value={data.email} onChange={InputEvent} />
<h5 className="h5__form"> Password </h5>
<input type="Password" placeholder="Password" name="password" value={data.password} onChange={InputEvent} />
<h5 className="h5__form"> Confirm Password </h5>
<input type="Password" placeholder="Confirm Password" name="confirmpassword" value={data.confirmpassword} onChange={InputEvent} />
<p>
<button onClick={register} type="submit" className="signup__registerButton" >Register Now</button>
</p>
</form4>
</div>
)
}
export default Register

Answer 1

制作History.js 的单独组件

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

然后在Register组件中。

import history from "../Shared/history";

const formSubmit = e => {
e.preventDefault();
history.push("/SomeComponent", {
someData: true,
otherData:{},
});
};

路线中：

<Route path="/SomeComponent" component={Component} />