React如何使用历史推送将id传递给路由器

npm install react-router-dom

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

const history = useHistory();

const redirectToDetails = (id) => {
  history.push(`/details/${id}`);
};

<button onClick={() => redirectToDetails(1)}>查看详情</button>

import { Route, Switch } from 'react-router-dom';
import DetailsPage from './DetailsPage';

function App() {
  return (
    <Switch>
      <Route path="/details/:id">
        <DetailsPage />
      </Route>
    </Switch>
  );
}

export default App;

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

function DetailsPage() {
  const { id } = useParams();

  // 使用ID执行您需要的操作，例如获取详细信息
  console.log('ID:', id);

  return (
    <div>
      <h1>Details for ID: {id}</h1>
    </div>
  );
}

export default DetailsState;