React如何创建组件以保存历史导航路径

import { BrowserRouter as Router, Route, Link, Outlet, useNavigate } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <hr />
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Router>
  );
}

function Home() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/about');
  };
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

function About() {
  return <h2>About</h2>;
}

export default App;

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

function Home() {
  const [searchParams, setSearchParams] = useSearchParams();
  // 使用searchParams.get('key')获取参数
  // 使用setSearchParams设置参数
}

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

function Breadcrumbs() {
  const location = useLocation();
  const pathnames = location.pathname.split('/').filter(x => x);

  return (
    <nav>
      {pathnames.map((name, index) => {
        const routeTo = `/${pathnames.slice(0, index + 1).join('/')}`;
        const isLast = index === pathnames.length - 1;
        return isLast ? (
          <span key={routeTo}>{name}</span>
        ) : (
          <Link key={routeTo} to={routeTo}>
            {name}
          </Link>
        );
      })}
    </nav>
  );
}