使用 useParams 路由失败

Question

我正在从事一个小型汽车网上商店项目。我正在努力获得
当用户单击“更多详细信息”时，ProductDetails.js 在新页面中呈现 然而，Products.js 失败了，首先它没有在浏览器栏中显示路径 应该是http://localhost:3000/product-details，其次它正在呈现主页。你 可能会在下面找到

 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;

and 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;

您能帮我解决这个问题吗？非常感谢。 尝试更改路由，检查语法，按照我的教程进行操作，但没有成功。

Answer 1

问题

Product

组件由在路由路径

Home

上渲染的

"/home"

组件渲染，并使用相对链接目标路径。相对路径相对于当前 URL 路径起作用。当前 URL 路径为 "/home"，链接目标为

to={`/product-details/${car.id}`}

，则最终的导航操作将是

"/home/product-details/someIdValue"

。由于没有与 URL 路径匹配的显式路由路径，因此会呈现

path="*"

通配符匹配器/“捕获所有”路由，并且 UI 重定向到

"/home"

。解决方案

使用

绝对链接目标路径。 relative 和 absolute 路由路径之间的区别在于绝对路径从根开始，例如"/"。换句话说，将前导

"/"

字符添加到链接目标路径值中。示例：

to={`/product-details/${car.id}`}

代码：

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 },
]

function Products() {
  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}`}>
              More details
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}