react-router - 如何在 react-router v5 中监听查询参数更改事件

Question

我希望能够监听查询参数更改事件，最好是通过一个钩子(Hook)，但任何东西都很好。我找不到任何表明它甚至可以使用 react-router 的东西，所以也欢迎没有它的其他建议。

Answer 1

react-router-dom@5 中没有任何内容可以直接执行此操作，因此您需要自己实现。您可以使用 useLocation Hook 访问 location.search 值来创建一个 URLSearchParams 对象，然后是一个 useEffect钩子(Hook)根据任何特定的 queryString 参数更新发出副作用。

例子:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

...

const { search } = useLocation();
const searchParams = new URLSearchParams(search);
const param = searchParams.get("param");

useEffect(() => {
  // issue side-effect
}, [param]);

对于 RRDv5，有这个方法来抽象查询参数的访问:

import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';

const useQuery = () => {
  const { search } = useLocation();
  return useMemo(() => new URLSearchParams(search), [search]);
};

...

import { useEffect } from 'react';
import { useQuery } from '../path/to/hooks';

...

const searchParams = useQuery();
const param = searchParams.get("param");

useEffect(() => {
  // issue side-effect
}, [param]);

您可以使用 useQuery 和 useEffect Hook 来创建另一个自定义 Hook 。

import { useEffect } from 'react';
import { useQuery } from '.';

const useQueryParam = (paramKey, cb) => {
  const searchParams = useQuery();
  const param = searchParams.get(paramKey);

  useEffect(() => {
    if (param) {
      cb(param);
    }
  }, [param]);
};

...

import { useQueryParam } from '../path/to/hooks';

...

useQueryParam(
  "myParameter",
  (paramValue) => {
    // do something with "myParameter" param value
  },
);