im creating a Product linding page (single product page) with react but when loading the navbar component
it couses the componint’s assists to load from wrong path for examble product page path is (/product/:id)
the navbar component will go (/product/:id/assist name ) to get the assist witch will not load the assist
because that is not the right path for the asities.
the exists on the (./assist name )
app.js file
function App() {
return (
<Router>
<Container>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/checkout" element={<Checkout />} />
<Route path="/signup" element={<SignUp />} />
<Route path="/address" element={<Address />} />
<Route path="/payment" element={ <Payment /> } />
<Route path="/addproduct" element={<AddProduct />} />
<Route path="/teast" element={<FirebaseUpload />} />
<Route path="/teast2" element={< Uploadfile2/>} />
<Route path="/teast3/:id" element={< Empty/>} />
<Route path="/products/:id" element= {<SingleProductPage/>} />
<Route path="/orders" element={<Orders />} />
</Routes>
</Container>
</Router>
);
}
single product page
that has’s the (/product/:id) path
function SingleProductPage() {
const [ {ReducerProducts , basket},dispatch] = useStateValue();
console.log("Rproduct>>>>>>>",ReducerProducts[0].Data)
console.log("basket>>>>>>>",basket)
const {id} = useParams()
let product = ReducerProducts[0].Data ;
const THEproduct = product.find(Prod => Prod._id === id) ;
console.log("product>>>>>",product);
console.log("productID>>>>>",THEproduct );
return (
<div id="single-Container">
<Navbar/>
single page
</div>
)
}
