React Hooks - 如何从查询字符串中获取参数值

Question

如何使用反应钩子并获取查询字符串值？

我使用的反应类： const id = this.props.match.params.id;

Answer 1

import { useParams } from "react-router-dom";

在组件中：

const { id } = useParams();

https://reacttraining.com/react-router/web/api/Hooks/useparams

Answer 2

在反应挂钩中：

假设你的网址是这样的：http://localhost:3000/user?name=John&id=10

然后你可以使用useLocation钩子来完成你的工作。

import React from 'react';
import { useLocation } from "react-router-dom";

function VerifySignup() {
    const search = useLocation().search;
    const name = new URLSearchParams(search).get('name');
    const id = new URLSearchParams(search).get('id');
    console.log({ name, id })
    return (
        <div>
            Verify Signup
        </div>
    )
}

export default VerifySignup

Answer 3

这是另一种纯 javascript 方式

假设你的 URL = localhost:3000/example?id=123

  React.useEffect(() => {

    const params = new URLSearchParams(window.location.search) // id=123
    let id = params.get('id') // 123 

}, [])

您还可以通过haslike检查查询参数是否存在

params.has('id') // true
params.has('name') // false

Answer 4

您可以创建自己的钩子

import { useLocation } from "react-router";

export default function useQueryParams() {
    const search = useLocation().search;
    const urlSearchParams = new URLSearchParams(search);
    const params = Object.fromEntries(urlSearchParams.entries());
    return params
}

然后在你的代码中使用它，如下所示

import useQueryParams from 'useQueryParams.js'

const { param1, param2 } = useQueryParams()