如何在react-router v6中使用useNavigate迁移useHistory.replace(x, y)？

Question

我正在将react-router-dom从v5升级到v6，代码库我还不完全熟悉，我很好奇如何替换以下代码：

const history = useHistory();
history.replace(url, params);

在文档中，它们仅显示在存在 1 个参数的情况下您将执行的替换操作。所以如果我有：

history.replace(url) 

我会简单地做：

const navigate = useNavigate();
navigate(url, {replace: true})

如何确保第二个参数与 useNavigate 挂钩一起保留？

我很想这样做：

const navigate = useNavigate();
navigate(url, params)

或者

const navigate = useNavigate();
navigate(url, { state: params })

怎样更换才不会造成影响呢？

Answer 1

状态在state属性下的第二个参数中发送，与指示重定向 (REPLACE) 与导航 (PUSH) 相同。

使用导航

钩子useNavigate返回一个navigate函数：

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

请注意，第二个参数是带有和属性的optionsarg 。replacestate

行动	v5 history = useHistory()	v6 navigate = useNavigate()
导航	history.push(url)	navigate(url)
重定向	history.replace(url)	navigate(url, { replace: true })
使用状态导航	history.push(url, params)	navigate(url, { state: params })
带状态重定向	history.replace(url, params)	navigate(url, { replace: true, state: params })

navigate(url, params)仅当 是具有和/或属性params的对象时才有效，例如.replacestate{ replace: true, state: { ... } }