点击后退按钮时隐藏搜索栏

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

const App = () => {
  const [showSearchBar, setShowSearchBar] = useState(true);
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      if (action === 'POP') {
        setShowSearchBar(false);
      }
    });

    return () => {
      unlisten();
    };
  }, [history]);

  return (
    <div>
      {showSearchBar && <SearchBar />}
      <Router>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </div>
  );
};

const SearchBar = () => {
  return <div>Search Bar</div>;
};

const Home = () => {
  return <div>Home Page</div>;
};

const About = () => {
  return <div>About Page</div>;
};

export default App;