如何在react路由器中处理查询参数

npm install react-router-dom

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/search" component={SearchResults} />
      </Switch>
    </Router>
  );
}

export default App;

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

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

  const query = queryParams.get('q');
  const page = queryParams.get('page') || 1;

  return (
    <div>
      <h1>Search Results for: {query}</h1>
      <p>Page: {page}</p>
      {/* 这里可以添加更多的逻辑来处理搜索结果 */}
    </div>
  );
}

export default SearchResults;

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

function SearchResults() {
  const location = useLocation();

  useEffect(() => {
    // 处理查询参数变化的逻辑
  }, [location.search]);

  // 组件其余部分...
}

npm install qs

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

function SearchResults() {
  const location = useLocation();
  const parsedParams = qs.parse(location.search, { ignoreQueryPrefix: true });

  console.log(parsedParams); // { q: 'react', page: '1' }

  // 组件其余部分...
}