CODEWITHSUNDEEP
reactjsreact-router-dom
sannn
sannn

Reputation: 33

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

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..

Upvotes: 3

Views: 11722

Answers (2)

Drew Reese
Drew Reese

Reputation: 202846

Issues

  1. 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.

  2. 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 || {};

...

Upvotes: 3

hgb123
hgb123

Reputation: 14891

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})
  }

  // ...
}

Upvotes: 0

Related Questions