如何使用React将应用程序从表单路由回主页？

import { Link } from 'react-router-dom';

function HomePage() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/form">表单</Link>
          </li>
        </ul>
      </nav>
      {/* 主页内容 */}
    </div>
  );
}

export default HomePage;

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

function App() {
  return (
    <Router>
      <Route path="/" exact component={HomePage} />
      <Route path="/form" component={FormPage} />
    </Router>
  );
}

export default App;

import React from 'react';

function FormPage() {
  // 表单逻辑和UI
  return (
    <div>
      <h2>表单页面</h2>
      {/* 表单内容 */}
    </div>
  );
}

export default FormPage;

import { useHistory } from 'react-router-dom';

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

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

    // 导航回主页
    history.push('/');
  };

  return (
    <div>
      <h2>表单页面</h2>
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

export default FormPage;