我的react应用程序在提交表单后没有重定向到 Jmeter 板页面。我尝试使用react-router-dom
Redirect
函数,但仍然没有成功。然后我选择了BrowserHistory.push
,但仍然没有成功。
对于后一个试验,URL更改为"/dashboard"
,但组件仍保留在表单页面上,直到我重新加载页面才移动到dashboard。
表格栏
<form>
<Input
displayValidationErrors={displayValidationErrors("fullname", validators)}
name="fullname"
type="text"
label="Full Name"
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
/>
<Input
displayValidationErrors={displayValidationErrors("password", validators)}
name="password"
type="password"
label="Password"
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
/>
<Input
displayValidationErrors={displayValidationErrors("password2", validators)}
name="password2"
type="password"
label="Confirm Password"
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
/>
<Input
displayValidationErrors={displayValidationErrors("email", validators)}
name="email"
type="email"
label="Email Address"
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
/>
<Input
displayValidationErrors={displayValidationErrors(
"phone_number",
validators
)}
name="phone_number"
type="number"
label="Phone Number"
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
/>
<Input
displayValidationErrors={displayValidationErrors("card_number", validators)}
value={data.card_number}
name="card_number"
type="text"
label="Card Number"
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
/>
<Input
displayValidationErrors={displayValidationErrors("date", validators)}
value={data.date}
name="date"
type="text"
label="Expiry Date"
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
/>
<Input
displayValidationErrors={displayValidationErrors("pin", validators)}
name="pin"
type="password"
label="PIN"
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
/>
<div className="col-lg-12 loginbttm">
<div className=" login-btm login-button">
<Button
handleClick={onSubmit}
type="submit"
className="btn btn-primary"
label="SUBMIT"
disabled={!isFormValid(validators)}
/>
</div>
</div>
</form>;
onSubmit函数
const onSubmit = (e) => {
e.preventDefault();
browserHistory.push("/dashboard");
};
按钮组件
const Button = ({ type, className, handleClick, label, disabled }) => (
<button
type={type}
className={className}
onClick={handleClick}
disabled={disabled}
>
{label}
</button>
);
我的app.js
function App() {
return (
<Router>
<div className="App">
<Switch>
<Route exact path="/dashboard">
<Dashboard />
</Route>
<Route exact path="/">
<Form />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
3条答案
按热度按时间oxosxuxt1#
我没有看到
createBrowserHistory
或类似<Router history={history}>
的东西,所以我猜你正在使用默认的浏览器历史记录。在这种情况下,您需要withRouter
来使其工作:更多关于
withRouter
解决方案here更多关于
createBrowserHistory
解决方案here对于带有
react-router
V5的功能组件,也可以使用hooks:查看this以了解有关
useHistory
的更多信息8hhllhi22#
试着在下面使用。希望能有帮助
uelo1irk3#
另一种使用函数组件的方法-