使用react-router加载Url参数

npm install react-router-dom

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

function MyComponent() {
  const { param1, param2 } = useParams();
  // 现在你可以在组件中使用param1和param2
}

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

function MyComponent() {
  const { param1, param2 } = useParams();

  return (
    <div>
      <h1>My Component</h1>
      <p>Param1: {param1}</p>
      <p>Param2: {param2}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/example/123/abc">Example</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/example/:param1/:param2">
            <MyComponent />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

<Route path="/example/:param1/:param2">
  <Link to={`/example/${param1}/${param2}`}>Link Text</Link>
</Route>