Component does not render in React-CodePudding

I'm trying to render a new component with title, image and text, but I just get an error that the path does not exist.

The path in Routes is:

  <Route path="article/:name" element={<WholeArticle />} />

and the component is written like this:

function WholeArticle() {
  let params = useParams();
  const [details, setDetails] = useState({});

  const fetchDetails = async () => {
    const data = await fetch(
      `https://newsapi.org/v2/${params.name}&apiKey=${process.env.REACT_APP_API_KEY}`
    );

    const detailData = await data.json();
    setDetails(detailData);
  };
  console.log(setDetails);

  useEffect(() => {
    fetchDetails();
  }, [params.name]);

  return (
    <div>
      <h2>{details.title}</h2>
      <img src={details.img} />
      <p>{details.content}</p>
    </div>
  );
}

export default WholeArticle;

The component WholeArticle shoud render when I click on an article, so I added a Link to Article component:

  <Link to={"article/"   article.id}>

Thank you for you time!

CodePudding user response：

maybe you are not writing Router component in your App.js file. import router component and write it with the name e.g: in your App.js file

CodePudding user response：

i think in your link should be like that

  <Link to={`/article/${article.id}`}>