时间戳

首页 > 解决方案 > 重定向到组件 onSubmit

javascript - 重定向到组件 onSubmit

问题描述

提交表单后，我的反应应用程序未重定向到仪表板页面。我尝试使用 react-router-dom 重定向功能，但仍然没有成功。然后我选择加入浏览器历史记录。推动但仍然没有成功。

对于后一个试用版，URL 更改为 /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;

标签： javascriptreactjsreact-router-v4react-router-v5

解决方案

我没有看到createBrowserHistory或类似的东西，<Router history={history}>所以我猜您正在使用默认浏览器历史记录。在这种情况下，您需要withRouter使其工作：

import React from "react";
import { withRouter } from "react-router-dom";

function App() {
  const onSubmit = (e) => {
    e.preventDefault()
    this.props.history.push("/personalInfo");             
  }
  ...
}
export default withRouter(App);

更多关于withRouter解决方案在这里

更多关于createBrowserHistory解决方案在这里

对于带有 react-router V5 的功能组件，您还可以使用钩子：

import { useHistory } from "react-router-dom";

function App() {
  let history = useHistory();
  const onSubmit = (e) => {
    e.preventDefault()
    history.push('/dashboard');        
  }

  return (
    <Router>
      <div className="App">
        ...
      </div>
    </Router>
  );
}

看看这个以了解更多关于useHistory

推荐阅读