如何在使用react路由器<Link>时向路由传递道具

npm install react-router-dom

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

function User({ match }) {
  return <h2>User ID: {match.params.id}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/user/123">User 123</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
}

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

function Search() {
  let [searchParams] = useSearchParams();
  return <h2>Search Query: {searchParams.get('q')}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/search?q=react">Search React</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/search" element={<Search />} />
      </Routes>
    </Router>
  );
}

function Home() {
  return (
    <Link to={{ pathname: '/about', state: { fromDashboard: true } }}>
      Go to About
    </Link>
  );
}

function About() {
  const location = useLocation();
  return <h2>Navigation from dashboard: {location.state?.fromDashboard ? 'Yes' : 'No'}</h2>;
}

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