Why React does not render component when I redirect to product page-CodePudding

I have an error and can not find any solution in google. The error appears when I want to go to a poduct page and press a button on home page to go to a product page and there I don't have any element rendered, I used React Route to user be able to go to product page and add it to a cart and suppose I did something wrong with providing path but not sure.

VM867:236 Matched leaf route at location "/2" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

Here is a code for Item Element:

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

function Item() {
  const { id } = useParams();
  const [item, setItem] = useState([]);
  const [loading, setLoading] = useState(false);
  console.log("item", item);
  //   Fetching Data
  useEffect(() => {
    const fetchedData = async () => {
      setLoading(true);
      const response = await fetch(`https://fakestoreapi.com/products/${id}`);
      const data = response.json();
      setItem(data);
    };

    fetchedData();
  }, []);

  return (
    <div className="container">
      {loading ? (
        <>
          <h3>Loading.....</h3>
        </>
      ) : (
        <div className="container">
          <p>{item.title}</p>
        </div>
      )}
    </div>
  );
}

export default Item;

And for App.js

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import ItemsComponent from "./Componets/ItemsComponent";
import Navbar from "./Componets/Navbar";
import Home from "./Componets/Home";
import Item from "./Componets/Item";
import About from "./Componets/About";
import AboutLink from "./Componets/AboutLink";
import Contact from "./Componets/Contact";
import Footer from "./Componets/Footer";
import "./App.css";

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route
            exact
            path="/"
            element={
              <>
                <Home />
                <ItemsComponent />
              </>
            }
          />
          <Route exact path="/:id" component={<Item />} />
          <Route exact path="/about" element={<About />} />
        </Routes>
        <AboutLink />
        <Footer />
      </Router>
    </>
  );
}

export default App;

It also affected all styling.

CodePudding user response：

I think that instead of this

<Route exact path="/:id" component={<Item />} />

you want either of those

<Route exact path="/:id" component={Item} />
<Route exact path="/:id" element={<Item />} />

CodePudding user response：

Maybe it's because you have

<Route exact path="/:id" component={<Item />} />

instead of

<Route exact path="/:id" element={<Item />} />