Redirect to Component onSubmit

Question

My react app is not redirecting to the dashboard page after submitting a form. I tried using react-router-dom Redirect function but still with no success. I then opt-in for BrowserHistory.push but still no success.

For the latter trial, the URL changes to "/dashboard" but the component remains on the form page, it doesn't move to dashboard until I reload the page.

form field

<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 function

const onSubmit = (e) => {
  e.preventDefault();
  browserHistory.push("/dashboard");
};

Button Component

const Button = ({ type, className, handleClick, label, disabled }) => (
  <button
    type={type}
    className={className}
    onClick={handleClick}
    disabled={disabled}
  >
    {label}
  </button>
);

My 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;

You can try this too `window.location = "/dashboard"` – Rohit Choudhary Feb 10 '20 at 08:46 — Rohit Choudhary, Feb 10 '20 at 08:46

score 3 · Accepted Answer · edited May 25 '23 at 05:28

I don't see createBrowserHistory or something like <Router history={history}> so I guess you are using the default browser history. In that case you need withRouter to make it work:

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);

More about withRouter solution here

More about createBrowserHistory solution here

For function component with react-router V5, you can also do with hooks:

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>
  );
}

Take a look at this to know more about useHistory

score 0 · Answer 2 · answered Feb 10 '20 at 08:25

0

try using below. hope it'll help

this.props.history.push({
        pathname: '/dashboard'
})

answered Feb 10 '20 at 08:25

Oshini

613
4
17

that means your constructor should have props passing from parent . constructor(props) { super(props); } – Oshini Feb 10 '20 at 08:33
its a functional Component, So no constructor – TOLULOPE ADETULA Feb 10 '20 at 08:34
try with below code and if not success try following url. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/hooks.md#usehistory code. – Oshini Feb 10 '20 at 09:05

score 0 · Answer 3 · answered Mar 29 '21 at 08:57

Another way of doing it with the function component -

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

function SignIn({history}) {
    const submit = (event) => {
        event.preventDefault();
        history.push("/profile");
    }
    ....
}

export default withRouter(SignIn)

Redirect to Component onSubmit

3 Answers3