我正在从事一个小型汽车Electron store 项目.当用户点击Products中的"更多详细信息"时，我试图在新页面中获取ProductDetails渲染，然而，它失败了.首先，它没有在浏览器栏上显示路径(应为"http://localhost:3000/product-details")，其次，它正在呈现Home页面.

App.js

import React from 'react';
import Cart from './pages/Cart';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Navigate } from 'react-router-dom';

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 toyota from '../assets/images/toyota_camry2023.png'
import honda from '../assets/images/honda_civic2023.png';
import ford from '../assets/images/ford_mustang2023.png';
import { Link } from 'react-router-dom';

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;

你能帮助我解决这个问题吗？我try 更改路由，判断语法，遵循我的教程，但都没有成功.