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

Question

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

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>

原文由 Franco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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")

对于功能组件，您可以用钩子 useLocation 替换 this.props.location 。请注意，您可以使用 window.location.search ，但这不允许在更改时触发 React 渲染。如果您的（非功能性）组件不是 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)

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

原文由 Christian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

反应路由器 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

路线道具被传递给渲染功能。

原文由 spencer.sm 发布，翻译遵循 CC BY-SA 4.0 许可协议