当你需要一个模块来轻松地解析你的查询字符串时，推荐使用query-string模块。

http://localhost:3000?token=xxx-xxx-xxx

componentWillMount() {
    var query = queryString.parse(this.props.location.search);
    if (query.token) {
        window.localStorage.setItem("jwt", query.token);
        store.dispatch(push("/"));
    }
}

在这里，我从Node.js服务器重定向回我的客户端后，成功的Google-Passport身份验证，这是重定向回令牌作为查询参数。

我用query-string模块解析它，保存它并更新url中的查询参数，从react-router-redux推送。

// react-router-dom v6

// import
import { useNavigate, createSearchParams } from 'react-router-dom';

// useSearchParams hook
const [searchParams, setSearchParams] = useSearchParams();

// usage
const params: URLSearchParams = new URLSearchParams();
params.id = '123';
params.color = 'white';

// set new parameters
setSearchParams(params);

! !当心!!这将只更新当前页面上的查询参数，但您将无法导航回(浏览器返回btn)到以前的路由，因为此选项不会更改历史记录。要使此行为到位，请检查之前的答案:https://stackoverflow.com/users/6160270/rakesh-sharma的答案

我更喜欢你使用下面的ES6风格的函数:

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

在我的例子中，输入输入字段输出到浏览器的url作为查询字符串，使用React JS功能组件如下所示

import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'

const Search = () => {
  const [query, setQuery] = useState('')
  const history = useHistory()

  const onChange = (e) => {
    setQuery(e.target.value)
  }

  useEffect(() => {
    const params = new URLSearchParams()
    if (query) {
      params.append('name', query)
    } else {
      params.delete('name')
    }
    history.push({ search: params.toString() })
  }, [query, history])

  return <input type="text" value={query} onChange={onChange} />
}

export default Search

浏览器URL查询

/搜索吗?name = query_here

就像@Craques解释的那样，我们可以使用替换功能，而不是每次更改都推送一个新路由。然而，在react-router的第6版中，useHistory()被useNavigate()取代，它只返回一个函数。你可以将选项传递给函数，以达到与旧的location.replace()相同的效果:

import { useLocation, useNavigate } from 'react-router-dom';
const to = { pathname: location.pathname, search: newParams.toString() };
navigate(to, { replace: true });

我目前在一个正在运行的项目中使用react-router v5，不容易迁移到v6。 我写了一个钩子，允许读取和修改一个URL参数，同时保持其他URL参数不变。 数组被视为逗号分隔值的列表: magnifying_glass ?产品=管,猎鹿帽

import { useCallback } from 'react';
import { useHistory } from 'react-router';

const getDecodedUrlParam = (name: string, locationSearch: string, _default?: any) => {
  const params = deserialize(locationSearch);
  const param = params[name];

  if (_default && Array.isArray(_default)) {
    return param
      ? param.split(',').map((v: string) => decodeURIComponent(v))
      : _default;
  }

  return param ? decodeURIComponent(param) : _default;
};

const deserialize = (locationSearch: string): any => {
  if (locationSearch.startsWith('?')) {
    locationSearch = locationSearch.substring(1);
  }
  const parts = locationSearch.split('&');
  return Object.fromEntries(parts.map((part) => part.split('=')));
};

const serialize = (params: any) =>
  Object.entries(params)
    .map(([key, value]) => `${key}=${value}`)
    .join('&');

export const useURLSearchParam = (name: string, _default?: any) => {
  const history = useHistory();
  const value: any = getDecodedUrlParam(name, location.search, _default);
  const _update = useCallback(
    (value: any) => {
      const params = deserialize(location.search);
      if (Array.isArray(value)) {
        params[name] = value.map((v) => encodeURIComponent(v)).join(',');
      } else {
        params[name] = encodeURIComponent(value);
      }
      history.replace({ pathname: location.pathname, search: serialize(params) });
    },
    [history, name]
  );
  const _delete = useCallback(() => {
    const params = deserialize(location.search);
    delete params[name];
    history.replace({ pathname: location.pathname, search: serialize(params) });
  }, [history, name]);
  return [value, _update, _delete];
};