用react实现代码：页面来回切换，表单依旧保持筛选状态

好的，以下是一个简单的示例代码，演示如何使用 React Router 和 React 组件来实现页面来回切换，同时保持表单的筛选状态：

// App.js

import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route, Link, useHistory, useLocation } from "react-router-dom";

function Home() {
  // 在 Home 组件中保存表单的筛选状态
  const [filter, setFilter] = useState("");

  const handleFilterChange = (e) => {
    setFilter(e.target.value);
  };

  return (
    <div>
      <h1>Home</h1>
      <form>
        <label>
          Filter:
          <input type="text" value={filter} onChange={handleFilterChange} />
        </label>
      </form>
      <Link to="/about">Go to About</Link>
    </div>
  );
}

function About() {
  // 在 About 组件中恢复表单的筛选状态
  const location = useLocation();
  const history = useHistory();
  const [filter, setFilter] = useState(location.state ? location.state.filter : "");

  const handleFilterChange = (e) => {
    setFilter(e.target.value);
  };

  const handleGoBack = () => {
    history.goBack();
  };

  return (
    <div>
      <h1>About</h1>
      <form>
        <label>
          Filter:
          <input type="text" value={filter} onChange={handleFilterChange} />
        </label>
      </form>
      <button onClick={handleGoBack}>Go Back</button>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在上面的代码中，我们定义了两个页面组件：`Home` 和 `About`。在 `Home` 组件中，我们使用 `useState` 钩子来保存表单的筛选状态，并在表单的 input 元素上绑定了 `onChange` 事件，以便在用户输入时更新组件的 state。

在 `About` 组件中，我们使用 `useLocation` 钩子来获取上一个页面的 location 对象，并从中恢复表单的筛选状态。我们将筛选状态保存到组件的 state 中，并在表单的 input 元素上绑定了 `onChange` 事件。

我们还使用了 `useHistory` 钩子来获取 history 对象，以便在点击 "Go Back" 按钮时返回上一个页面。

最后，在 `App` 组件中，我们使用 React Router 的 `Switch` 和 `Route` 组件来实现页面的来回切换。注意，在 `Route` 组件中，我们使用了 `exact` 属性来确保只有在路径为 "/" 时才渲染 `Home` 组件。