如何在 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; }

請注意，第二個參數是具有replace和state屬性的options arg。

行動	v5 history = useHistory()	v6 navigate = useNavigate()
導航	history.push(url)	navigate(url)
重定向	history.replace(url)	navigate(url, { replace: true })
導航 w/狀態	history.push(url, params)	navigate(url, { state: params })
重定向帶狀態	history.replace(url, params)	navigate(url, { replace: true, state: params })

navigate(url, params)僅在params是具有replace和/或state屬性的對象時才有效，例如{ replace: true, state: { ... } } 。