1

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.

TTT2
  • 549
  • 2
  • 13

1 Answers1

0

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

};
Enes Hamzaj
  • 1
  • 1
  • 1
  • is to pass the useNavigate as a prop to the class component as shown [here](https://stackoverflow.com/questions/70143135/how-to-use-react-router-dom-v6-navigate-in-class-component) – TTT2 Dec 15 '22 at 04:06
  • If you look carefully: You have two arrows: “ export const withNavigate = WrappedComponent => props => { “, I don’t get this; That’s what I’m trying to say. – Enes Hamzaj Dec 15 '22 at 04:14