我正在尝试从/ (Home)我的/item (itemInfo)页面传递一个数组
这是我们路由的主要 App() :
function App() {
return (
<Router>
<div className="Application">
<Switch> {/*Makes sure we are only on one route at a time*/}
<Route exact path='/' component={Home} />
<Route exact path='/item/:pId' component={ItemInfo} />
<Route exact path='/vendor' component={VendorInfo} />
<Route exact path='/addVendor' component={AddVendor}/>
<Route exact path='/addProduct' component={AddProduct}/>
</Switch>
</div>
</Router>
);
}
而且我不知道如何将数组从 {Home} 传递到 {ItemInfo},因为我们不能将它作为 URL 参数传递(与 :pId 不同) 这是 {ItemInfo} 页面:
import React from 'react'
import { useParams } from 'react-router-dom'; //Helps us redirect to other pages
function ItemInfo(){
let {pId}= useParams();
//want to have [data] array on this page to access it hopefully like this
//console.log(data) and see the array on the console
function addNewDataRow(){
console.log("ADD new Data Row");
}
return (
<div className="Application">
<header>
<nav className="navbar navbar-dark bg-dark">
<div className="container-fluid">
这是 {Home}(我想从中传递数据数组):
function Home(){
const product_data=[
{pId: 1, pName:'product name', pDescription:' description here', pQuantity:1, pWeightType:'Kg'},
]
const [data,setData]=useState(product_data);
const [vData, setvData]=useState(vendor_data);
const history=useHistory();
function itemTableRowClicked(e){
console.log(e.target.id);
console.log("YOU CLICKED ME");
let path=`/item/:${e.target.id}`;
//let path=`/item`;
history.push(path);
}
函数 itemTableRowClicked(e) 是重新路由到 ItemInfo 页面的函数
我是一个相当新的编程学生,所以如果我的描述不清楚或者我缺少基本信息,请告诉我 :)