how to send params in react.js using useNavigate in react-router-dom version 6

Question

import React from "react";
import Detailpost from "../../DetailPost/detailpost";

const Post = (props) => {
    return (
        <div className="post">
            <div className="img-thum">
                <img src="https://placeimg.com/200/150/tech" alt="IMG" />
            </div>
            <div className="content">
                <div
                  className="title"
                  onClick={()=>props.Detail(props.data.id)}
                >
                  {props.data.title}
                </div>
                <div className="Body">{props.data.body}</div>
                <div className="rem">
                <button
                  className="remove"
                  onClick={() => props.remove(props.data.id)}
                >
                  Remove
                </button>  
                <button
                  className="update"
                  onClick={() => props.update(props.data)}
                >
                  Update
                </button>  
            </div>
        </div>
    );
}

export default Post;

In this case I'll make when I click the title I move to another page.

handleDetail = (id) => {
    const navigate = useNavigate();
    navigate('/detail-post', { UserId: id })
}

but when I run the code I get some problem:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

anyone can help me..

Drew Reese · Accepted Answer · 2022-02-24 05:14:12Z

Issues

You are breaking the rules of hooks by conditionally call the useNavigate hook.

Only Call Hooks at the Top Level

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.
You are not passing the state correctly. The navigate function takes a second argument options object with state and replace keys. Any data you want to send along with the route transition should be on the state key.

useNavigate
```
declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}
```

Solution

import { useNavigate } from 'react-router-dom';

...

const navigate = useNavigate();

...

handleDetail = (UserId) => {
  navigate('/detail-post', { state: { UserId } });
}

...

And OFC use the useLocation hook on the receiving route to access the passed route state.

import { useLocation } from 'react-router-dom';

...

const { state } = useLocation();
const { UserId } = state || {};

...

hgb123 · Accepted Answer · 2022-02-24 04:30:40Z

0

useNavigate is a hook, and as a rule, only call hooks at the top level of your React component

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns

const YourComponent = () => {
  const navigate = useNavigate();

  const handleDetail = (id) => {
    navigate('/detail-post', {UserId:id})
  }

  // ...
}

answered Feb 24, 2022 at 4:30

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

how to send params in react.js using useNavigate in react-router-dom version 6

2 Answers 2

Issues

Only Call Hooks at the Top Level

Solution

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issues

Only Call Hooks at the Top Level

Solution

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related