如何从查询字符串中获取参数值？

Question

如何在我的routes.jsx文件中定义一个路由来捕获__firebase_request_key参数值，这些参数值是在从服务器重定向后由Twitter的单点登录进程生成的URL中获得的？

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

我尝试了以下路由配置，但：redirectParam未捕获提到的参数：

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>

Answer 1

反应路由器v3

使用React Router v3，您可以从this.props.location.search（？qs1=naisarg）获取查询字符串

React路由器v4

使用React Router v4，不再存在this.props.location.query。您需要改为使用this.props.location.search，自己或使用现有包（如querystring）解析查询参数。

示例

下面是使用React Router v4和查询字符串库的一个简单示例。

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';
    
class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

合理的

React路由器删除查询属性的团队rational是：

有许多流行的包执行查询字符串解析/字符串化的方式略有不同，这些不同对一些用户来说可能是“正确的”方式，对另一些用户来说可能是“不正确的”方式。如果反应路由器选择了“正确的”，它只对一些人是正确的。然后，它需要为其他用户添加一种替代他们首选的查询解析包的方法。React路由器没有内部使用搜索字符串来解析键值对，因此它不需要选择其中哪一个应该是“正确的”。

[...]

4.0的方法是去掉所有“包括电池”的功能，回到基本的路由。如果您需要查询字符串解析、异步加载或Redux集成或其他非常特定的东西，那么您可以将其添加到专门针对您的用例的库中。更少的问题在于你不需要，你可以根据自己的特定偏好和需求定制东西。

您可以在GitHub上找到完整的讨论。

Answer 2

使用组件

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

this.props.match.params.id

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

使用渲染

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

this.props.match.params.id

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

Answer 3

React路由器v4和React路由器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")

对于功能组件，您可以将this.props.location替换为钩子usePlace。注意，您可以使用window.location.search，但这不允许在更改时触发React渲染。如果您的（非功能性）组件不是Switch的直接子元素，您需要使用with Rout来访问路由器提供的任何道具。

反应路由器v3

React路由器已经为您解析了位置，并将其作为道具传递给您的RouteComponent。您可以通过以下方式访问查询（url中的？之后）部分：

this.props.location.query.__firebase_request_key

如果您正在寻找路径参数值，在路由器内用冒号（：）分隔，这些参数值可以通过

this.props.match.params.redirectParam

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

全体的

nizam.sp的建议

console.log(this.props)

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