如何在 React js 中读取 URL 中的引用代码

Question

我想从 URL 获取参考码，http://localhost:3000/?ref=2926

我尝试使用 const session = ${window.location.href};它获取完整的当前 URL 并尝试使用 split() 路径名但它不起作用，如何从 URL.

中仅获取参考代码

Answer 1

你可以试试这个：

${window.location.search.split('=')[1]}

Answer 2

您可以使用浏览器原生api

const query = new URLSearchParams(window.location.search);
console.log(query.get(ref))

Answer 3

您可以使用URL.searchParams

const { searchParams } = new URL(document.location)

代码：

const { searchParams } = new URL('http://localhost:3000/?ref=2926')
console.log(searchParams.get('ref'))

React 组件：

export const UrlSearchParamValue = ({ name }) => {
  const { searchParams } = new URL(document.location)
  const value = searchParams.get(name)
  return <span>{value}</span>
};

使用：

<UrlSearchParamValue name='ref' />

Answer 4

您还可以通过这种方式获取 ref 的值：

const queryString = window.location.search;
const parameters = new URLSearchParams(queryString);
const value = parameters.get('ref');

如何在 React js 中读取 URL 中的引用代码

How to read the ref code from URL in react js

javascript

reactjs

react-hooks