在react本机动态链接中传递参数

npm install react-router-dom

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

function UserProfile({ match }) {
  const { userId } = match.params;
  return <div>User ID: {userId}</div>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/user/123">User 123</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/user/:userId" component={UserProfile} />
      </Switch>
    </Router>
  );
}

export default App;

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

function SearchResults() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const keyword = queryParams.get('keyword');

  return <div>Search results for: {keyword}</div>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/search?keyword=react">React</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/search" component={SearchResults} />
      </Switch>
    </Router>
  );
}

export default App;

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

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

function SearchResults() {
  const query = useQuery();
  const keyword = query.get('keyword');

  return <div>Search results for: {keyword}</div>;
}