React JS如何使用react-router-dom将数组作为参数传递

Posted 2023-02-22

【中文标题】React JS如何使用react-router-dom将数组作为参数传递

【英文标题】：React JS how do you pass an array as a parameter using react-router-dom

【发布时间】：2022-01-19 01:45:02

【问题描述】：

我正在尝试从 / (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 页面的函数

我是一个相当新的编程学生，所以如果我的描述不清楚或者我缺少基本信息，请告诉我:)

【参考方案1】：

React 具有单向数据流，即 parent to child 。一种方法是在 Home 和 ItemInfo 即 App 的父组件中定义状态，但这不是一个好方法。其次是使用 Context Api 或其他状态管理工具，如 redux、flux 等 reactjs.org/docs/context.html（用于 context api）

function App() 

  const product_data=[
    pId: 1, pName:'product name', pDescription:' description here', pQuantity:1, pWeightType:'Kg',    
  ]
  const [data,setData]=useState(product_data);
  return (
    <Router>
      <div className="Application">
        <Switch>    /*Makes sure we are only on one route at a time*/
          <Route exact path='/' >
           <Home data=data setData=setData />
          </Route>
          <Route exact path='/item/:pId'>
           <ItemInfo data=data />
          </Route>
          <Route exact path='/vendor' component=VendorInfo />
          <Route exact path='/addVendor' component=AddVendor/>
          <Route exact path='/addProduct' component=AddProduct/>
        </Switch>
      </div>
    </Router>
  );

//Home component
function Home(data,setData)......

//ItemInfo component
function ItemInfo(data)

【参考方案2】：

您已经在使用来自 react-router 的 useHistory。这将允许您推送state 以及路线更改。状态是你可以传递数组的地方。

// Push a new entry onto the history stack with a query string
// and some state. Location state does not appear in the URL.
history.push('/home?the=query',  someArray: [...stuff] );

然后您可以从 props.location.state.someArray 取消引用第二个组件中的该状态。

当然，您需要更改 ItemInfo 组件以接受道具。

更多：https://v5.reactrouter.com/web/api/history