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

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>

Answer 1

React Router v6，使用钩子(Hook)

在react-router-dom v6中，有一个名为useSearchParams的新钩子(Hook)。所以与

const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")

您将得到“blablabla”。请注意，searchParams 是 URLSearchParams 的实例，它也实现了迭代器，例如用于使用 Object.fromEntries 等。

React Router v4/v5，无钩子(Hook)，通用

React Router v4 不再为您解析查询，但您只能通过 this.props.location.search (或 useLocation，见下文)访问它。原因参见nbeuchat's answer .

例如与 qs作为 qs 导入的库，您可以这样做

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

另一个库是 query-string 。请参阅this answer有关解析搜索字符串的更多想法。如果不需要IE-compatibility您还可以使用

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

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

React 路由器 v3

React Router 已经为您解析了位置并将其传递给您的 RouteComponent作为 Prop 。您可以通过以下方式访问查询(网址中？之后)部分

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)

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