React-Router-Dom 中的 React 鏈接

Question

我不確定為什么我的圖片不可點擊。 在主屏幕中單擊圖像時， <Link to={ /product/${product._id} }><Card.Img src={product.image} /> 它應該是拉產品屏幕 1 產品詳細信息，但它沒有不做任何事。 react-router-dom 版本 6.3

應用程序.js

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router,Routes,  Route } from 'react-router-dom'

import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';


function App() {
  return (
  <Router>
    <Header />
    <main className="py-3">
      <Container>
      <Routes>
          <Route path="/" element={<HomeScreen />} exact />
            <Route path="/products/:id" element={<ProductScreen />} />
          </Routes>
      <HomeScreen/>
       </Container>
     </main>
     <Footer/>
     </Router>
  );
}

export default App;

HomeScreen.js

import React from 'react'
import { Row, Col} from 'react-bootstrap'
import products from '../products'
import Product from '../components/Product'

function HomeScreen() {
  return (
    <div>
      <h1>Latest Products</h1>
    <Row>
        {products.map(product =>(
            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
            </Col>
        ))}
    </Row>
    
    </div>
  )
}

export default HomeScreen

產品.js

import React from 'react'
import { Link } from 'react-router-dom'
import { Card } from 'react-bootstrap'
import Rating from './Rating'

function Product({product}) {
  return (
    <Card className="my-3 p-3 rounded shadow-sm">
      
      <Link to={`/product/${product._id}`}>
        <Card.Img src={product.image} />
      </Link>

      <Card.Body>
      
      <Link to={`/product/${product._id}`}>
        <Card.Title as="div" className="text-center">
            <strong>{product.name}</strong>
        </Card.Title>
      </Link>

      <Card.Text as="div" >
        <div className="my-3 text-center">
          <Rating value={product.rating} text={`(${product.numReviews})`} color={'#f8e825'}/>
        </div>
      </Card.Text>

      <Card.Text as="h4" className="text-center">
        ${product.price}
      </Card.Text>
      </Card.Body>

    </Card>
  )
}

export default Product

ProductScreen.js

import React from 'react'
import { Link, useParams } from 'react-router-dom';
import { Row, Col, Image, ListGroup, Button, Card} from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'


function ProductScreen() {
    const match = useParams();
    const product = products.find((p) => p._id == match.id)
  return (
    <div>
      {product.name}
    </div>
  )
}

export default ProductScreen

產品.js

const products = [
  {
    '_id': '1',
    'name': 'Airpods Wireless Bluetooth Headphones',
    'image': '/images/airpods.jpg',
    'description':
      'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
    'brand': 'Apple',
    'category': 'Electronics',
    'price': 89.99,
    'countInStock': 10,
    'rating': 4.5,
    'numReviews': 12,
  },
  {
    '_id': '2',
    'name': 'iPhone 11 Pro 256GB Memory',
    'image': '/images/phone.jpg',
    'description':
      'Introducing the iPhone 11 Pro. A transformative triple-camera system that adds tons of capability without complexity. An unprecedented leap in battery life',
    'brand': 'Apple',
    'category': 'Electronics',
    'price': 599.99,
    'countInStock': 7,
    'rating': 4.0,
    'numReviews': 8,
  },
  {
    '_id': '3',
    'name': 'Cannon EOS 80D DSLR Camera',
    'image': '/images/camera.jpg',
    'description':
      'Characterized by versatile imaging specs, the Canon EOS 80D further clarifies itself using a pair of robust focusing systems and an intuitive design',
    'brand': 'Cannon',
    'category': 'Electronics',
    'price': 929.99,
    'countInStock': 5,
    'rating': 3,
    'numReviews': 12,
  },
  {
    '_id': '4',
    'name': 'Sony Playstation 4 Pro White Version',
    'image': '/images/playstation.jpg',
    'description':
      'The ultimate home entertainment center starts with PlayStation. Whether you are into gaming, HD movies, television, music',
    'brand': 'Sony',
    'category': 'Electronics',
    'price': 399.99,
    'countInStock': 11,
    'rating': 5,
    'numReviews': 12,
  },
  {
    '_id': '5',
    'name': 'Logitech G-Series Gaming Mouse',
    'image': '/images/mouse.jpg',
    'description':
      'Get a better handle on your games with this Logitech LIGHTSYNC gaming mouse. The six programmable buttons allow customization for a smooth playing experience',
    'brand': 'Logitech',
    'category': 'Electronics',
    'price': 49.99,
    'countInStock': 7,
    'rating': 3.5,
    'numReviews': 10,
  },
  {
    '_id': '6',
    'name': 'Amazon Echo Dot 3rd Generation',
    'image': '/images/alexa.jpg',
    'description':
      'Meet Echo Dot - Our most popular smart speaker with a fabric design. It is our most compact smart speaker that fits perfectly into small space',
    'brand': 'Amazon',
    'category': 'Electronics',
    'price': 29.99,
    'countInStock': 0,
    'rating': 4,
    'numReviews': 12,
  },
]


export default products

Answer 1

我讀了你的回答。 當您單擊產品時，網站不會重定向單擊的產品頁面。 因為 sub-div 標簽或組件中的 Link 組件沒有運行。

您可以將您的代碼修改為我的以下代碼。

import React from 'react'
import { Row, Col} from 'react-bootstrap'
import {Link} from 'react-router-dom'
import products from '../products'
import Product from '../components/Product'

function HomeScreen() {
  return (
    <div>
      <h1>Latest Products</h1>
    <Row>
        {products.map(product =>(
            <Link to={`/product/${product._id}`}>
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} />
              </Col>
            </Link>
        ))}
    </Row>
    
    </div>
  )
}

export default HomeScreen

否則，您可以通過這種方式進行修改。

import React from 'react'
import { Row, Col} from 'react-bootstrap'
import {useNavigate} from 'react-router-dom'
import products from '../products'
import Product from '../components/Product'

function HomeScreen() {
  const navigate = useNavigate();

  const handleChangePage = (id) => {
    navigate(`/product/${id}`);
  }

  return (
    <div>
      <h1>Latest Products</h1>
    <Row>
        {products.map(product =>(
            <Col key={product._id} sm={12} md={6} lg={4} xl={3} onClick={() => handleChangePage(product._id)}>
              <Product product={product} />
            </Col>
        ))}
    </Row>
    
    </div>
  )
}

export default HomeScreen