在React中选择不同的下拉选项时更改路由参数

npm install react-router-dom

import { BrowserRouter as Router, Switch, Route, Link, useParams, useLocation, useHistory } from 'react-router-dom';

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

  const handleDropdownChange = (event) => {
    const selectedOption = event.target.value;
    history.push(`/${selectedOption}`);
  };

  return (
    <select onChange={handleDropdownChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/option1">
          <Option1Component />
        </Route>
        <Route path="/option2">
          <Option2Component />
        </Route>
        <Route path="/option3">
          <Option3Component />
        </Route>
      </Switch>

      <DropdownComponent />
    </Router>
  );
}