Перенаправление на компонент onSubmit

Question

Мое приложение реакции не перенаправляет на страницу панели инструментов после отправки формы. Я попытался использовать функцию Redirect типа router-router-dom, но все равно безуспешно. Затем я выбираю историю браузера. pu sh, но все еще безуспешно.

для последней пробной версии, URL меняется на / dashboard, но компонент остается на странице формы, он не перемещается на dashboard, пока я не перезагрузлю страницу

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

Answer 1

Я не вижу 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 решении здесь

Для функционального компонента с реагирующим маршрутизатором 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

Answer 2

попробуйте использовать ниже. надеюсь, это поможет

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