如何在react-router中设置参数？

import { BrowserRouter as Router, Route } from 'react-router-dom';
import YourComponent from './YourComponent';

function App() {
  return (
    <Router>
      <Route path="/your-path/:id" component={YourComponent} />
    </Router>
  );
}

export default App;

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

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

  return (
    <div>
      <h1>参数值：{id}</h1>
    </div>
  );
}

export default YourComponent;

import { BrowserRouter as Router, Route } from 'react-router-dom';
import YourComponent from './YourComponent';

function App() {
  return (
    <Router>
      <Route path="/your-path" component={YourComponent} />
    </Router>
  );
}

export default App;

import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/your-path?id=1">设置参数</Link>
    </nav>
  );
}

export default Navigation;

import React from 'react';
import { useHistory } from 'react-router-dom';

function YourComponent() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/your-path?id=1');
  };

  return (
    <div>
      <button onClick={handleClick}>设置参数</button>
    </div>
  );
}

export default YourComponent;

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

function YourComponent() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const id = searchParams.get('id');

  return (
    <div>
      <h1>参数值：{id}</h1>
    </div>
  );
}

export default YourComponent;