React-如何从查询字符串获取参数值

export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}

When you work with react route dom then will empty object with for match but if you do the following code then it will for es6 component as well as it works directly for function component

import { Switch, Route, Link } from "react-router-dom";

<Route path="/profile" exact component={SelectProfile} />
<Route
  path="/profile/:profileId"
  render={props => {
    return <Profile {...props} loading={this.state.loading} />;
  }}
/>
</Switch>
</div>

This way you can get props and match params and profile id

This worked for me after a lot of research on es6 component.

most simple solution!

in routing :

   <Route path="/app/someUrl/:id" exact component={binder} />

in react code :

componentDidMount() {
    var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
    var queryString = "http://url/api/controller/" + id
    $.getJSON(queryString)
      .then(res => {
        this.setState({ data: res });
      });
  }

也许有点晚了，但是这个反应钩子可以帮助您在URL查询中获取/设置值：https：//github.com/rudyhuynh/use-url-search-params（由我编写）。

无论有无，它都可以工作react-router。下面是您的情况下的代码示例：

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

React Router 5.1+

As of version 5.1 you can use the useParams hook as a helper for this kind of issue. Example:

<Route path="/docs/:id" component={Doc} />

const Doc: React.FC = React.memo(() => {
    const { id } = useParams();

    return <div>Doc ID: {id}</div>;
}

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

this.props.location.state.from.search

它将显示整个查询字符串（?符号后的所有内容）

this.props.params.your_param_name 将工作。

这是从查询字符串中获取参数的方法。
请做console.log(this.props);探索所有可能性。

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
    })
}

如果您的路由器是这样的

<Route exact path="/category/:id" component={ProductList}/>

你会得到这样的ID

this.props.match.params.id

您可以简单地检查 react-router，只要您在路由器中定义，就可以使用代码获取查询参数：

this.props.params.userId

反应路由器v4

使用 component

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

this.props.match.params.id

组件将使用路线道具自动渲染。

使用 render

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

this.props.match.params.id

路线道具将传递到render函数。

反应路由器v3

React Router已经为您解析了位置并将其作为道具传递给RouteComponent。您可以通过访问查询（在URL中的？之后）部分

this.props.location.query.__firebase_request_key

如果要查找路径参数值（在路由器内部用冒号（:)分隔），则可以通过以下方式访问它们

this.props.match.params.redirectParam

这适用于最新的React Router v3版本（不确定哪个版本）。据报使用较旧的路由器版本this.props.params.redirectParam。

React Router v4和React Router v5

React Router v4不再为您解析查询，但您只能通过进行访问this.props.location.search。由于某些原因，请参阅nbeuchat的答案。

例如，您可以导入qs库qs

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

另一个库是query-string。有关解析搜索字符串的更多建议，请参见此答案。

另外，如果您的组件不是的直接子代，则Switch需要使用withRouter来访问任何路由器提供的道具。

一般

nizam.sp的建议

console.log(this.props)

在任何情况下都会有帮助。