React - react-router v6 在类组件中使用 Navigate 并设置状态

Question

I have a class component that need to redirect to another page, for this I created this function to decorate the export of the class component in order to have the option of navigate in the state of the component

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...
    />
  );
};

I want to set the state to the redirected page and tried to do this with this code

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

but does not work, which is the proper way to set the state when redirecting? also the url_to_redirect has it state defined when the app is mounted as this is rendered from a main component that set the state with a async function of redux thunk so this component have a global state set, my intention when redirecting is to override this state set by redux when the app is mounted in the moment that the redirect is done, is there a way to override this as i am trying or is it better to create another component or refactor the redux logic.

Answer 1

export const withNavigate = WrappedComponent => props => {

Why do you need “WrappedComponent =>”?

You first have to import that component:

import WrappedComponent from “./components/folder”;

// Then… use it;

export const withNavigate = props => {

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

};