如何像v5中那样使用react-router useNavigate来替换params？

Question

在我当前使用react-router v5的应用程序中，我们有一个来自电子邮件的重定向链接，其中包含一个

referrer=email

参数，我们用它来确定登录/注册页面上的某些初始状态：

  const queryParameters = new URLSearchParams(search);
  const referrer = queryParameters.get('referrer');
  const [open, setOpen] = useState(
    pathname === '/signup' && referrer !== 'email' ? false : true
  );

但是，在做出决定后，我们希望从当前正在使用

history.replace

执行的 URL 中删除该参数。但是，迁移到 v6 和

useNavigate

的文档似乎没有考虑

replace

功能的用例：

useEffect(() => {
    // remove params from URL
    history.replace({
      referrer: '',
    });
  }, []);

新的导航 API 是否有一个选项可以映射到此？

Answer 1

你尝试过吗

const navigate = useNavigate();
//snip...

useEffect(() => {
  const url = ...;
  navigate(url);

}[])

来源

Answer 2

有关如何发出 RELACE 操作而不是 PUSH 操作的详细信息，请参阅

options.replace

，类似于

history.replace

。

如果您只想更新 URL 搜索参数，请使用

useSearchParams

钩子。它的工作方式与

useNavigate

钩子类似，但适用于查询字符串，例如搜索参数。

示例：

import { useLocation, useSearchParams } from 'react-router-dom';

...

const { pathname } = useLocation();
const [searchParams, setSearchParams] = useSearchParams();

const [open, setOpen] = useState(() => {
  const referrer = searchParams.get("referrer");
  return pathname === '/signup' && referrer !== 'email';
});

useEffect(() => {
  setSearchParams(searchParams => {
    // remove the "referrer" from the queryString
    searchParams.delete("referrer");

    // return the next queryString
    return searchParams;
  }, { replace: true }); // <-- redirect action
}, []);

使用

useNavigate

的示例（如果这是您真正想要使用的钩子）：

import { useNavigate, useLocation } from 'react-router-dom';

...

const navigate = useNavigate();
const { pathname, search } = useLocation();
const searchParams = new URLSearchParams(search);

const [open, setOpen] = useState(() => {
  const referrer = searchParams.get("referrer");
  return pathname === '/signup' && referrer !== 'email';
});

useEffect(() => {
  // remove the "referrer" from the queryString
  searchParams.delete("referrer");

  // redirect to the current path with the update queryString
  navigate({
    pathname: ".",
    search: searchString.toString(),
  }, { replace: true });
}, []);