redirect to another page after submitting a form

问题

How can I redirect to another page after submitting a form? What code is needed to add my code?? This is my code simple.js

import React from 'react';
import { Field, reduxForm } from 'redux-form';


const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
            required
          />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
             required
          />
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field
            name="email"
            component="input"
            type="email"
            placeholder="Email"
             required
          />
        </div>
      </div>
      <div>
        <label>Sex</label>
        <div>
          <label>
            <Field name="sex" component="input" type="radio" value="male" />
            {' '}
            Male
          </label>
          <label>
            <Field name="sex" component="input" type="radio" value="female" />
            {' '}
            Female
          </label>
        </div>
      </div>
      <div>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component="select" >
            <option />
            <option value="ff0000">Red</option>
            <option value="00ff00">Green</option>
            <option value="0000ff">Blue</option>
          </Field>
        </div>
      </div>
      <div>
        <label htmlFor="employed">Employed</label>
        <div>
          <Field
            name="employed"
            id="employed"
            component="input"
            type="checkbox"
          />
        </div>
      </div>
      <div>
        <label>Notes</label>
        <div>
          <Field name="notes" component="textarea"  required />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};


export default reduxForm({
  form: 'simple', // a unique identifier for this form
})(SimpleForm);

This is the simple form , I want to direct to a login page called asyncValidateform.js.. HERE IS THAT PAGE..

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validate from './validate';
import asyncValidate from './asyncValidate';

const renderField = (
  { input, label, type, meta: { asyncValidating, touched, error } },
) => (
  <div>
    <label>{label}</label>
    <div className={asyncValidating ? 'async-validating' : ''}>
      <input {...input} type={type} placeholder={label} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const AsyncValidationForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />

      <Field
        name="confirmpassword"
        type="password"
        component={renderField}
        label="Confirm Password"
      />
      <div>
        <button type="submit" disabled={submitting}>Sign Up</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'asyncValidation', // a unique identifier for this form
  validate,
  asyncValidate,
  asyncBlurFields: ['username'],
})(AsyncValidationForm);

& this is my validate page

const validate = values => {


  const errors = {};
  if (!values.username) {
    errors.username = 'Required';
  }
  if (!values.password) {
    errors.password = 'Required';
  }
  if (!values.confirmpassword ) {
    errors.confirmpassword = 'Required' ;
  }
   else if (values.confirmpassword !== values.password) {
    errors.confirmpassword = 'Password mismatched' ;
  }




  return errors;


};

export default validate;

index.js page

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Values } from "redux-form-website-template";
import store from "./store";
import showResults from "./showResults";
import SimpleForm from "./SimpleForm";


const rootEl = document.getElementById("root");

ReactDOM.render(
  <Provider store={store}>
    <div style={{ padding: 15 }}>
      <h2>Simple Form</h2>
      <SimpleForm onSubmit={showResults} />
      <Values form="simple" />
    </div>
  </Provider>,
  rootEl
);

What all changes need to make in my code??I want to first enter into the simple.js page after entering details and by clicking the submit the page must redirect to asynValidateForm.js page.. Please help me to sort out this problem.. Thank you ...

回答1:

Define all your components in routes file with the exact route you want to redirect to . Your routes.js file should look something like this.

import React from 'react';
import { BrowserRouter as Router, Route, Link  } from 'react-router-dom';
import Home from './components/home/home';
import AboutUs from './components/aboutUs/aboutUs';
const Routes = () => (
    <Router>
            <Route exact path="/" component={Home} />
            <Route path="/aboutus" component={AboutUs} />
    </Router>
);

export default Routes;

And import Routes in App.js which is basically the entry point of your react application.

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';

ReactDOM.render(<Routes />, document.getElementById('root'));

Use <Link to="/path">Test</Link> in your html instead of <a>Test</a>
Or if you want to redirect with javascript , use this.props.router.push('/route')

来源：https://stackoverflow.com/questions/49685587/redirect-to-another-page-after-submitting-a-form