从v4开始，React路由器不再直接在其location对象中提供查询参数。原因是

There are a number of popular packages that do query string parsing/stringifying slightly differently, and each of these differences might be the "correct" way for some users and "incorrect" for others. If React Router picked the "right" one, it would only be right for some people. Then, it would need to add a way for other users to substitute in their preferred query parsing package. There is no internal use of the search string by React Router that requires it to parse the key-value pairs, so it doesn't have a need to pick which one of these should be "right".

包含了这个之后，只解析location会更有意义。在需要查询对象的视图组件中搜索。

你可以通过覆盖react-router中的withRouter来实现这一点

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

React路由器v4

使用组件

<Route path="/users/:id" component={UserPage}/> 

this.props.match.params.id

该组件自动使用路由道具呈现。

使用渲染

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 

this.props.match.params.id

路由道具被传递给渲染函数。

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}

React路由器v6

来源:在React路由器中获取查询字符串(搜索参数)

使用新的useSearchParams钩子和.get()方法:

const Users = () => {
  const [searchParams] = useSearchParams();
  console.log(searchParams.get('sort')); // 'name'

  return <div>Users</div>;
};

使用这种方法，您可以读取一个或几个参数。

将参数作为一个对象:

如果你需要一次性获得所有的查询字符串参数，那么我们可以像这样使用Object.fromEntries:

const Users = () => {
  const [searchParams] = useSearchParams();
  console.log(Object.fromEntries([...searchParams])); // ▶ { sort: 'name', order: 'asecnding' }
  return <div>Users</div>;
};

阅读更多和现场演示:在React路由器中获取查询字符串(搜索参数)

在需要访问可以使用的参数的组件中

this.props.location.state.from.search

这将显示整个查询字符串(在?标志)

React路由器v6，使用钩子

在react-router-dom v6中，有一个名为useSearchParams的新钩子。所以,

const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")

你会得到“blablabla”。注意，searchParams是URLSearchParams的一个实例，它也实现了一个迭代器，例如用于使用Object.fromEntries等。

React Router v4/v5，没有钩子，通用

React Router v4不再为你解析查询，但你只能通过this.props.location.search(或useLocation，见下文)访问它。原因见nbeuchat的答案。

例如，你可以用qs库导入qs

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

另一个库是query-string。有关解析搜索字符串的更多想法，请参阅这个答案。如果你不需要ie兼容性，你也可以使用

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

对于功能组件，你可以用钩子useLocation替换this.props.location。注意，你可以使用window.location。搜索，但这将不允许在更改时触发React渲染。 如果你的(非功能性的)组件不是Switch的直接子组件，你需要使用throuter来访问路由器提供的任何道具。

React路由器v3

React Router已经为你解析了位置，并将它作为道具传递给你的RouteComponent。您可以访问查询(在?在url)部分通过

this.props.location.query.__firebase_request_key

如果你在路由器中寻找用冒号(:)分隔的路径参数值，这些可以通过

this.props.match.params.redirectParam

这适用于最新的React Router v3版本(不确定是哪个)。旧版本的路由器报告使用this.props.params.redirectParam。

一般

尼扎姆。Sp的建议

console.log(this.props)

无论如何都会有帮助的。