React路由useParams失效：商品详情页跳转异常求助

问题分析 #

点击Products组件的「More details」按钮后，浏览器地址栏未显示预期路径http://localhost:3000/product-details，页面直接跳转至Home组件，核心问题出在路由路径匹配和链接路径格式上。

修复方案 #

1. 修正Link组件的绝对路径 #

Products.js中Link的to属性使用了相对路径，导致路由无法匹配到配置的绝对路径规则，需添加根路径前缀/：

修改后的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;

2. 简化路由嵌套结构 #

App.js中Routes下嵌套了无路径的空Route，虽不违反语法，但可能导致路由匹配逻辑异常，直接将子Route放在Routes下即可：

修改后的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 path="/home" element={<Home />} />
       <Route path="/cart" element={<Cart />} />
       <Route path="/product-details/:id" element={<ProductDetails />} />
       <Route path="*" element={<Navigate to="/home" replace />} />
     </Routes>
   </Router>
 );
}

export default App;

3. 可选：添加空值容错处理 #

为避免无效id导致页面崩溃，在ProductDetails.js中添加空值判断：

修改后的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];

 if (!productDetails) {
   return <div>Product not found</div>;
 }

 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;

内容的提问来源于stack exchange，提问作者Ahmed_cz