0

i tried to build my webapp but i have a little problem the reason is because the verson the instructor is old verson but i updated to the latest verson i have this problem.

What I am trying to do is generate clicks into the post. But I can't click on it. When I open it, this error is what I'm getting.

Home.js:23 Uncaught TypeError: navigate.push is not a function
    at onClick (Home.js:23:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
    at executeDispatch (react-dom.development.js:8243:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
    at processDispatchQueue (react-dom.development.js:8288:1)
    at dispatchEventsForPlugins (react-dom.development.js:8299:1)
    at react-dom.development.js:8508:1

this is the code

    import React from "react";
import axios from "axios";
import { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom';

function Home() {
  const [listOfPosts, setListOfPosts] = useState([]);
  const navigate = useNavigate();
    
  useEffect(() => {
    axios.get("https://my-project-ienpf.run-us-west2.goorm.io/posts").then((response) => {
      setListOfPosts(response.data);
    });
  }, []);

  return (
    <div>
      {listOfPosts.map((value, key) => {
        return (
          <div
            className="post"
            onClick={() => {
              navigate.push(`/post/${value.id}`);
            }}
          >
            <div className="title"> {value.title} </div>
            <div className="body">{value.postText}</div>
            <div className="footer">{value.username}</div>
          </div>
        );
      })}
    </div>
  );
}

export default Home;

I hope you can help me

poom
  • 3
  • 3
  • I don't think you have to call ```push``` on the navigate object. Based on the docs, you just do ```navigate('path')``` https://reactrouter.com/docs/en/v6/api#usenavigate – szczocik Feb 10 '22 at 09:26
  • I think , This link will help you lot . https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router – Khandker Ashik Mahmud Feb 10 '22 at 09:30

2 Answers2

0

You can change

navigate.push(`/post/${value.id}`);

to

navigate(`/post/${value.id}`);
keikai
  • 14,085
  • 9
  • 49
  • 68
lucky930
  • 86
  • 5
0

don`t do this, navigate = useNavigate(); navigate.push("/about")

instead, navigate("/about")

Bek
  • 1
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 04 '22 at 04:44