close

[Solved] useNavigate() may be used only in the context of a component

I am trying to use useNavigate But I am facing the following error: useNavigate() may be used only in the context of a component in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Let’s Get Start with This Article.

How useNavigate() may be used only in the context of a component Error Occurs?

I am trying to use useNavigate But I am facing the following error.

useNavigate() may be used only in the context of a component

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve useNavigate() may be used only in the context of a component Error?

  1. How To Solve useNavigate() may be used only in the context of a component Error?

    To Solve useNavigate() may be used only in the context of a component You need to Wrap your app with Router and then your error will be solved. Here the problem is useNavigate() hook is Using the Context that Router provides. So If You are using useNavigate outside of Router then you will face this error. First of all, Open Your Index.js file and Wrap Your App With Router. As You Wrap Your App With Router, Now Your useNavigate Hooks will be able to use Router's Context and then Your error will be solved. Thank You.

  2. useNavigate() may be used only in the context of a component

    To Solve useNavigate() may be used only in the context of a component You need to Wrap your app with Router and then your error will be solved. Here the problem is useNavigate() hook is Using the Context that Router provides. So If You are using useNavigate outside of Router then you will face this error. First of all, Open Your Index.js file and Wrap Your App With Router. As You Wrap Your App With Router, Now Your useNavigate Hooks will be able to use Router's Context and then Your error will be solved. Thank You.

Solution 1: Wrap App With Router

To Solve useNavigate() may be used only in the context of a component You need to Wrap your app with Router and then your error will be solved. Here the problem is useNavigate() hook is Using the Context that Router provides. So If You are using useNavigate outside of Router then you will face this error. First of all, Open Your Index.js file and Wrap Your App With Router Just like below.

root.render(
  <Router>
    <App />
  </Router>
);

As You Wrap Your App With Router, Now Your useNavigate Hooks will be able to use Router’s Context and then Your error will be solved. Thank You.

Solution 2: Navigate Example

Now, You can simply Use useNavigate Hooks in Your Project at anywhere. Just useNavigate Like this.

function Redirect() {

  let navigate = useNavigate();

  function handleClick() {
    navigate('/home')
  }

  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Here navigate takes your route name at the first position and You can also pass replace Option to true or false. First, pass a To value It is the same type as <Link to> with an optional second { replace, state } arg, or Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button. Just like this.

function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(-1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

So this is How You can Use useNavigate hook in Your react Project Thank you.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

Leave a Comment