0

I have a react js class component and wanted to navigate to a functional component and pass some data. I am facing issues in navigating. The structure is like this,

Class component:

export default class Dept extends Component {
     constructor(props) {};
     render() {
    return (
      <>
      <div className="container">
        <Button
                onClick={()=> {
                    //navigate from here to functional component and pass data
              }}
      </div>
     </>
    );
}

Functional Component:

export default function Office(props) {
//code
}

I am able to navigate from functional component to class component using "useNavigate" but not from class to functional since useNavigate is a hook. I have tried other ways like writing another functional component GoToOffice which has code to navigate to Office component. But using it inside Dept component on button click doesnt navigate to Office.This is the code I wrote:

function GoToOffice(props) {
  let navigate = useNavigate();
  navigate("./office", { replace: true });
};

//inside Dept component on button click
<Button onClick={() => {<GoToTemplateList/>}} Test button </Button>

Can anyone please let me know what is wrong? It would helpful if anyone suggests a way to navigate in this case.

sagar patil
  • 3
  • 1
  • I followed the first reply to the question in adjoining link and the issue is solved: [link](https://stackoverflow.com/questions/70143135/how-to-use-react-router-dom-v6-navigate-in-class-component) – sagar patil Aug 19 '22 at 17:21

1 Answers1

0

here I try to write a wrapper component and just want to export corresponding hooks(useNavigate, useLocation). then you can wrap your class component in order to use these hooks.

https://stackoverflow.com/a/69962641/17018079

Ramin Khodaie
  • 242
  • 3
  • 10