Javascript 如何根据ID动态显示数据库

我一直在尝试根据app.js中的ID动态显示数据。我正确发送了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 About from './about';
import Help from './help';
import * as bs from 'react-bootstrap';
import { BrowserRouter  as Router , Route, Switch} from "react-router-dom";

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/:{props.product.id}" >
                        <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;

从“React”导入React；
从“react bootstrap”导入{Container，Row，Col}
导入“/App.css”；
从“/Top.js”导入Top；
从“./Bottom”导入底部；
从“/”导入权限；
从“./左”导入左；
从“./Center”导入中心；
从“/关于”导入关于；
从“/Help”导入帮助；
从“react bootstrap”导入*作为bs；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
功能应用程序（道具）{
返回(
)
}
导出默认应用程序；

它发送ID，但现在在另一个页面上没有显示我要使用的数据

import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import * as bs from 'react-bootstrap';
import { useParams} from "react-router";

function ProductsDetail(props) {
    let {id}= useParams()
  return (
    <div>
        <p>
            Description: {id}
            </p>
    </div>
  )

}

export default ProductsDetail;

从“React”导入React；
从“react bootstrap”导入{Container，Row，Col}
导入“/App.css”；
从“react bootstrap”导入*作为bs；
从“react router”导入{useParams}；
功能产品详细信息（道具）{
设{id}=useParams（）
返回(

描述：{id}

)
}
导出默认产品详细信息；

---

我一直在尝试使用useParams（），但我没有正确理解如何获取ID并显示信息。另外，我一直在使用道具发送ID。

您没有将

ID

传递给组件，如果您像这样直接传递，则不需要使用from

useParams

应用程序：

从“React”导入React；
从“react bootstrap”导入{Container，Row，Col}
导入“/App.css”；
从“/Top.js”导入Top；
从“./Bottom”导入底部；
从“/”导入权限；
从“./左”导入左；
从“./Center”导入中心；
从“/关于”导入关于；
从“/Help”导入帮助；
从“react bootstrap”导入*作为bs；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
功能应用程序（道具）{
返回(
)
}
导出默认应用程序；

产品详情：

import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import * as bs from 'react-bootstrap';
import { useParams} from "react-router";

function ProductsDetail(props) {
    let {id}= useParams()
  return (
    <div>
        <p>
            Description: {props.id}
            </p>
    </div>
  )

}

export default ProductsDetail;

从“React”导入React；
从“react bootstrap”导入{Container，Row，Col}
导入“/App.css”；
从“react bootstrap”导入*作为bs；
从“react router”导入{useParams}；
功能产品详细信息（道具）{
设{id}=useParams（）
返回(

描述：{props.id}

)
}
导出默认产品详细信息；

这两个代码块是相同的，我看不到您在应用程序中导入产品详细信息

import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import * as bs from 'react-bootstrap';
import { useParams} from "react-router";

function ProductsDetail(props) {
    let {id}= useParams()
  return (
    <div>
        <p>
            Description: {props.id}
            </p>
    </div>
  )

}

export default ProductsDetail;