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

小编典典

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

reactjs

__firebase_request_key从服务器重定向后，如何在我的routes.jsx文件中定义路由以从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>

阅读 563

2020-07-22

共1个答案

小编典典

反应路由器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 Routerv4不再为您解析查询，但是您只能通过进行访问this.props.location.search。出于某些原因。

例如，您可以导入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为hook
useLocation。请注意，您可以使用window.location.search，但这不允许在更改时触发React渲染。如果您的（非功能性）组件不是的直接子代，则Switch需要使用withRouter来访问任何路由器提供的道具。

一般

nizam.sp的建议

console.log(this.props)

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

2020-07-22