React Router Dom中的React链接

Question

我不知道为什么我的图像不可点击。在主屏幕中，当点击图像时，<链接到＝｛/product/${product._id}｝>lt；卡片Img src={product.image}/>它本应提取productscreen 1产品的详细信息，但它什么也没做。react路由器dom 6.3版

App.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

products.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

我读了你的答案。当你点击产品时，网站不会重定向点击的产品页面。因为子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