title: how to send params in react.js using useNavigate in react-router-dom version 6
body: <pre><code>import React from &quot;react&quot;;
  import Detailpost from &quot;../../DetailPost/detailpost&quot;;
  
  const Post = (props) =&gt; {
      return (
          &lt;div className=&quot;post&quot;&gt;
              &lt;div className=&quot;img-thum&quot;&gt;
                  &lt;img src=&quot;https://placeimg.com/200/150/tech&quot; alt=&quot;IMG&quot; /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;content&quot;&gt;
                  &lt;div
                    className=&quot;title&quot;
                    onClick={()=&gt;props.Detail(props.data.id)}
                  &gt;
                    {props.data.title}
                  &lt;/div&gt;
                  &lt;div className=&quot;Body&quot;&gt;{props.data.body}&lt;/div&gt;
                  &lt;div className=&quot;rem&quot;&gt;
                  &lt;button
                    className=&quot;remove&quot;
                    onClick={() =&gt; props.remove(props.data.id)}
                  &gt;
                    Remove
                  &lt;/button&gt;  
                  &lt;button
                    className=&quot;update&quot;
                    onClick={() =&gt; props.update(props.data)}
                  &gt;
                    Update
                  &lt;/button&gt;  
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default Post;
  </code></pre>
  <p>In this case I'll make when I click the title I move to another page.</p>
  <pre><code>handleDetail = (id) =&gt; {
      const navigate = useNavigate();
      navigate('/detail-post', { UserId: id })
  }
  </code></pre>
  <p>but when I run the code I get some problem:</p>
  <blockquote>
  <p>Uncaught Error: Invalid hook call. Hooks can only be called inside of
  the body of a function component.</p>
  </blockquote>
  <p>anyone can help me..</p>