在react with typescript中提交表单后更改路由

npm install react-router-dom

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

const MyForm: React.FC = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const history = useHistory();

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    // 处理表单提交逻辑
    // ...

    // 更改路由
    history.push('/new-route');
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formData.name} onChange={handleChange} />
      <input type="email" name="email" value={formData.email} onChange={handleChange} />
      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;

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

const App: React.FC = () => {
  return (
    <Router>
      <Route path="/form" component={MyForm} />
      {/* 其他路由路径和组件 */}
    </Router>
  );
};

export default App;