Question

我一直试图显示获取ID的信息并开始显示其信息。但是，似乎我正在发送ID，但并没有将我重定向到页面详细信息。

import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import Top from './top.js';
import Bottom from './bottom';
import Right from './right';
import Left from './left';
import Center from './center';
import * as bs from 'react-bootstrap';
import { BrowserRouter  as Router , Route, Switch} from "react-router-dom";
import ProductsDetail from './product-detail';

function App(props) {
  return (
    <Router>
          <Container fluid className="p-0 min-vh-100 d-flex flex-column">
              <Row fluid className = "flex-grow-0 flex-shrink-0 shadow-sm" > 
                <bs.Col className = "px-3 py-2">
                  <Top/>

                </bs.Col>
              </Row>

              <Row noGutters className = "flex-grow-1">
                <Col md="2" className ="px-3 py-4 shadow" style ={{backgroundColor: "#99CCCC"}}>
                  <Left/>
                </Col>

                <Col md="8">
                  <Switch>
                    <Route path ="/">
                      <Center />
                    </Route>
                    <Route path = "/product-detail/:productid">
                        <ProductsDetail />
                    </Route>
                  </Switch>
                </Col>

                <Col md = "2" className = "px-3 py-4 shadow" style ={{backgroundColor: "#343a40"}}>
                  <Right/>
                </Col>
              </Row>

              <Row fluid>
                <Col className = "d-flex justify-content-center px-3 py-2" style ={{backgroundColor: "#28a745"}}><Bottom/></Col>
              </Row> 
          </Container>
      </Router>
  )

}

export default App;

这是产品详细信息页面

import React from 'react';
import { useParams } from 'react-router-dom'

function ProductsDetail(props) {

    const {productid} = useParams()
            return (
                <div>
                    <p>
                        Description: {productid}
                    </p>
                </div>
            )

}

export default ProductsDetail;

这是我使用链接发送ID的产品卡

import React from 'react';
import * as bs from 'react-bootstrap';
import {Link} from "react-router-dom";
import {
    Card, Button,Container, Row, Col 
  } from 'react-bootstrap';



function ProductCard(props) {
  return (
        <Card style={{ width: '10rem' }}>
            <Link to = {`/product-detail/${props.product.id}`} className='btn btn-primary' style={{position:'absolute', marginTop:-5, alignSelf: 'flex-end'}}> 

                Details

                </Link>
            <Card.Img variant="top" src={`/media/products/${props.product.filename}-1.png`} />
        <Card.Body>

        <Card.Title>{props.product.name}</Card.Title>
        <Card.Text>
        Price: ${props.product.price}
        </Card.Text>
        </Card.Body>
        </Card>

  )

}

export default ProductCard;

我正在尝试使用useParams来获取product-detail.js上的ID，但它没有将我重定向到该页面。我

您如何正确使用useParams显示数据

0 个答案: