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

小编典典

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

all

如何在我的 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>

阅读 247

2022-03-03

共1个答案

小编典典

React Router 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")

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

反应路由器 v3

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

this.props.location.query.__firebase_request_key

如果您正在查找路径参数值，在路由器内部用冒号 (:) 分隔，可以通过以下方式访问这些值

this.props.match.params.redirectParam

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

一般的

nizam.sp 的建议

console.log(this.props)

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

2022-03-03