如何从 url 获取键值 [重复]

Posted 2023-03-10

【中文标题】如何从 url 获取键值 [重复]

【英文标题】：How to get key value from url [duplicate]

【发布时间】：2021-11-21 09:45:34

【问题描述】：

我正在使用Axios 从 API 获取数据。从一个页面，我通过 URL 将数据发送到另一个页面，我想在另一个页面上使用它。

http://localhost:3000/otp?email=[e-mail]

我想获得电子邮件的价值。 在响应项目中，我使用 react-router-dom、Axios、钩子。

【参考方案1】：

使用钩子的一种解决方案：

import  useLocation  from 'react-router-dom'

const location = useLocation()
const email = new URL(location.href).searchParams.get('email')

【参考方案2】：

你可以使用 VanillaJS

const params = new URLSearchParams(window.location.search)
const email = params.urlParams.get('email');
console.log(email)

【参考方案3】：

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

你应该像下面这样使用

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?

【参考方案4】：

你可以使用react-router-dom中的useLocation钩子，例如：

import  useLocation  from "react-router-dom";

const Component = () => 
  const query = new URLSearchParams(useLocation().search);

  return <div>query.get('email')</div>

了解路由中参数和查询之间的区别也很重要。