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

Question

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

Answer 1

react-router-dom@5

中没有任何内容可以直接执行此操作，因此您需要自己实现此操作。您可以使用

useLocation

钩子访问

location.search

值来创建

URLSearchParams

对象，然后使用

useEffect

钩子根据任何特定的 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

挂钩来创建另一个自定义挂钩。

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
  },
);

Answer 2

你尝试过这个吗：

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

function MyComponent() {
    const location = useLocation();

    useEffect(() => {
        console.log('Location changed');
    }, [location]);
    // your code
}