I'm currently working on a project for an online car shop. My goal is to have the ProductDetails displayed on a new page when the user clicks on "more details" in the Products section, but unfortunately, it's not working as expected. Firstly, it's not displaying the correct path in the browser bar, which should be
"http://localhost:3000/product-details"Home page.
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Navigate } from 'react-router-dom';
import Cart from './pages/Cart';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';
function App() {
return (
<Router>
<Routes>
<Route>
<Route path="/home" element={<Home />} />
<Route path="/cart" element={<Cart />} />
<Route path="/product-details/:id" element={<ProductDetails />} />
<Route path="*" element={<Navigate to ="/home" replace />} />
</Route>
</Routes>
</Router>
);
}
export default App;
Products.js
import React from 'react';
import { Link } from 'react-router-dom';
import toyota from '../assets/images/toyota_camry2023.png'
import honda from '../assets/images/honda_civic2023.png';
import ford from '../assets/images/ford_mustang2023.png';
function Products() {
const cars = [
{ id: 1, name: 'Toyota Camry', price: 25000, img: toyota },
{ id: 2, name: 'Honda Civic', price: 27000, img: honda },
{ id: 3, name: 'Ford Mustang', price: 35000, img: ford },
]
return (
<div>
<h2>Find The Best Deals</h2>
<h2>Available Cars</h2>
<ul>
{cars.map(car => (
<li key={car.id}>
<img src={car.img} alt={car.name} />
<h3>{car.name}</h3>
<p>Price: ${car.price}</p>
<Link to={`product-details/${car.id}`} target="_blank">More details</Link>
</li>
))}
</ul>
</div>
)
}
export default Products;
ProductDetails.js
import React from 'react';
import { useParams } from 'react-router-dom';
function ProductDetails() {
const { id } = useParams();
const Product = {
1: {
Engine: '2.5L Inline-4 Gas',
Drivetrain: 'Front-Wheel Drive',
Transmission: '8-Speed Automatic',
Warranty: '5 Years / 100000 km'
},
2: {
Engine: 'Turbocharged DOHC 16-valve Inline-4',
Drivetrain: 'Front-Wheel-Drive,',
Transmission: 'Continuously Variable Automatic',
Warranty: '3 Years / 60000 km'
},
3: {
Engine: 'Intercooled Turbo Premium Unleaded I-4',
Drivetrain: 'Rear Wheel Drive with limited-slip differential',
Transmission: '10-speed automatic transmission',
Warranty: '3 years / 60000 km'
},
};
const ProductDetails = Product[id];
return (
<div>
<h2>Car Details</h2>
<p>{ProductDetails.Engine}</p>
<p>{ProductDetails.Drivetrain}</p>
<p>{ProductDetails.Transmission}</p>
<p>{ProductDetails.Warranty}</p>
<button>Add to Cart</button>
<button>Book a Test Drive</button>
</div>
)
}
export default ProductDetails;
It seems like there might be an issue with the routing or syntax. Let's work together to resolve this problem. Feel free to provide any other insights that may help me assist you further.