在react js中使用ProtectedRoutes时如何停止表单值重置

在React.js中使用ProtectedRoutes时，要停止表单值重置，可以采取以下步骤：

确保表单的值被保存在组件的状态中。可以使用React的useState钩子或者类组件的state来保存表单的值。
在表单提交之前，阻止默认的表单提交行为。可以使用事件对象的preventDefault方法来阻止默认行为。
在表单提交时，将表单的值传递给后端进行处理。可以使用fetch或axios等库来发送表单数据到后端。
在表单提交成功后，可以根据需要进行页面跳转或其他操作。

以下是一个示例代码，演示如何在React.js中使用ProtectedRoutes时停止表单值重置：

import React, { useState } from 'react';
import { Route, Redirect } from 'react-router-dom';

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const [formValues, setFormValues] = useState({});

  const handleSubmit = (event) => {
    event.preventDefault();
    // 发送表单数据到后端进行处理
    // 可以使用fetch或axios等库发送请求
    // 根据需要进行页面跳转或其他操作
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  return (
    <Route
      {...rest}
      render={(props) =>
        // 检查用户是否已登录，如果已登录则渲染组件，否则重定向到登录页面
        isAuthenticated ? (
          <Component
            {...props}
            formValues={formValues}
            handleChange={handleChange}
            handleSubmit={handleSubmit}
          />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default ProtectedRoute;

在上述示例中，ProtectedRoute组件接收一个component prop，表示需要保护的组件。在render方法中，检查用户是否已登录，如果已登录则渲染传递给ProtectedRoute的组件，并将表单的值、值改变的处理函数和提交表单的处理函数作为props传递给该组件。如果用户未登录，则重定向到登录页面。

请注意，上述示例中的isAuthenticated变量需要根据实际情况进行定义和使用。此外，还需要根据具体的需求进行适当的修改和调整。