0

Fetching news headlines from an API and showing 10 news per page and theirs id's. which also refreshes in 10 seconds and new headlines come. With pressing detail button we see details. Struggling to pass prop from one component using this code:

export interface InitPost {
  location: any;
  title: string;
  url: string;
  created_at: Date;
  author: string;
}

const [posts, setPosts] = useState<InitPost[]>([]);


  const getDetails = (post: InitPost) => {
    navigate("/details", { state: post });
  };

props passed to Details component here is the code: with error "Module '"react-router-dom"' has no exported member 'RouteComponentProps." what am I doing wrong?

import React from "react";
import { RouteComponentProps } from "react-router-dom";
import { InitPost } from "./Home";

const Details: React.FC = (
  props: RouteComponentProps<{}, any, InitPost | any>
) => {
  const post = props.location.state;

  return (
    <div>
      <pre>{JSON.stringify(post, null, 2)}</pre>
    </div>
  );
};

export default Details;
Mohammad Miskatur Rahman
  • 193
  • 1
  • 2
  • 10

1 Answers1

2

This seems duplicated. In short, if you are using react-router v6, then RouteComponentProps is not available. You will need to use the hooks useNavigate and useParams.

Alejandro Barone
  • 1,743
  • 2
  • 13
  • 24