React - react-router v6 在類組件中使用 Navigate 並設置狀態

Question

我有一個需要重定向到另一個頁面的類組件，為此我創建了這個函數來裝飾類組件的導出，以便可以選擇在組件狀態下導航

import { useNavigate } from "react-router-dom";

export const withNavigate = WrappedComponent => props => {
  const navigate = useNavigate();
  // etc... other react-router-dom v6 hooks

  return (
    <WrappedComponent
      {...props}
      navigate={navigate}
      // etc...
    />
  );
};

我想將狀態設置為重定向頁面並嘗試使用此代碼執行此操作

this.props.navigate("/url_to_redirect",{
  state:{
    something:response.data
  }
});

但不起作用，重定向時設置狀態的正確方法是什么？ url_to_redirect 在安裝應用程序時也定義了它的狀態，因為這是從一個主要組件呈現的，該組件使用 redux thunk 的異步函數設置狀態，所以這個組件有一個全局狀態集，我在重定向時的意圖是覆蓋這個狀態集通過 redux 在重定向完成時安裝應用程序時，有沒有辦法在我嘗試時覆蓋它，或者創建另一個組件或重構 redux 邏輯更好。

Answer 1

export const withNavigate = WrappedComponent => props => {

為什么需要“WrappedComponent =>”？

您首先必須導入該組件：

import WrappedComponent from “./components/folder”;

// Then… use it;

export const withNavigate = props => {

    return(
      <WrappedComponent
      {...props}
      //…
      />
    );

};