React Router Dom 两页表单

React Router Dom 是一个基于 React 的路由库，可以帮助我们管理浏览器的路由，实现单页应用程序的路由跳转等功能。本文将介绍如何使用 React Router Dom 实现一个两页表单应用程序。

安装 React Router Dom

在使用 React Router Dom 之前，我们需要先安装它。可以使用 npm 或 yarn 进行安装，命令如下：

npm install react-router-dom

或者

yarn add react-router-dom

创建两页表单组件

我们需要创建两个表单组件，一个用于输入个人信息，另一个用于输入工作信息。这里我们使用函数式组件来创建表单组件。

个人信息表单组件

import React from 'react';

const PersonalInfoForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单提交的默认行为
    console.log('Personal Info Form Submitted');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Personal Information Form</h2>
      <label>
        Name:
        <input type="text" />
      </label>
      <br />
      <label>
        Age:
        <input type="number" />
      </label>
      <br />
      <button type="submit">Next</button>
    </form>
  );
};

export default PersonalInfoForm;

工作信息表单组件

import React from 'react';

const WorkInfoForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单提交的默认行为
    console.log('Work Info Form Submitted');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Work Information Form</h2>
      <label>
        Company:
        <input type="text" />
      </label>
      <br />
      <label>
        Position:
        <input type="text" />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default WorkInfoForm;

创建页面组件和路由

我们需要创建一个页面组件来包含两个表单组件，并且使用 React Router Dom 创建路由来实现表单之间的切换。

页面组件

import React from 'react';
import { Switch, Route, useHistory } from 'react-router-dom';
import PersonalInfoForm from './PersonalInfoForm';
import WorkInfoForm from './WorkInfoForm';

const FormPage = () => {
  const history = useHistory();

  const handlePersonalInfoSubmit = (event) => {
    event.preventDefault(); // 阻止表单提交的默认行为
    history.push('/work-info');
  };

  return (
    <div>
      <Switch>
        <Route path="/personal-info">
          <PersonalInfoForm onSubmit={handlePersonalInfoSubmit} />
        </Route>
        <Route path="/work-info">
          <WorkInfoForm />
        </Route>
      </Switch>
    </div>
  );
};

export default FormPage;

在页面组件中，我们使用 Switch 和 Route 组件来创建路由，将 PersonalInfoForm 和 WorkInfoForm 分别绑定到路由的路径 '/personal-info' 和 '/work-info' 上。我们还把 history 对象传递给 PersonalInfoForm 组件，并在其表单提交时使用 history.push('/work-info') 实现表单之间的跳转。

App 组件

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import FormPage from './FormPage';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <FormPage />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

在 App 组件中，我们使用 BrowserRouter 和 Switch 组件来进行路由处理，将 FormPage 组件绑定到根路径上。

运行应用程序

现在我们已经完成了应用程序的创建，我们可以使用 npm start 命令来启动应用程序了。

npm start

然后在浏览器中访问地址 http://localhost:3000，就可以看到我们创建的表单应用程序了。未完成的 Personal Info 表单应该会显示在页面中，填写完表单并点击 Next 按钮后，就会跳转到 Work Info 表单。在 Work Info 表单中填写完表单后，点击 Submit 按钮，就可以在浏览器控制台中看到表单已经成功提交了。

现在你已经学会了如何使用 React Router Dom 实现一个两页表单应用程序，继续加油！