提交表单后重定向到另一个页面

Question

如何在提交表单后重定向到另一个页面？添加我的代码需要什么代码？？这是我的代码 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);

这是简单的表单，我想转到一个名为 asyncValidateform.js 的登录页面。这是该页面..

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

&这是我的验证页面

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 页

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

我的代码需要进行哪些更改？我想在输入详细信息后首先进入 simple.js 页面，然后单击提交页面必须重定向到 asynValidateForm.js 页面。请帮我解决这个问题.. 谢谢...

Answer 1

在路由文件中使用您要重定向到的确切路由定义所有组件。您的 routes.js 文件应如下所示。

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;

并在 App.js 中导入路由，这基本上是您的 React 应用程序的入口点。

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

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

在 html 中使用 <Link to="/path">Test</Link> 而不是 <a>Test</a>
或者，如果您想使用 javascript 重定向，请使用 this.props.router.push('/route')

提交表单后重定向到另一个页面

redirect to another page after submitting a form

reactjs

redux-form