React JS how do you pass an array as a parameter using react-router-dom-CodePudding

I am trying to pass an array from / (Home) my /item (itemInfo) page

This is the main App() where we route:

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>
  );
}

And I have no clue on how to pass the array from {Home} into {ItemInfo}, since we can't pass it as a URL parameter (unlike :pId) This is the {ItemInfo} Page:

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">

This is the {Home} (where I want to pass the data array from):

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);

  }

The function itemTableRowClicked(e) is the one that re-routes to the ItemInfo Page

I am a fairly new programming student, so let me know if my description isn't clear or I am missing essential information :)

CodePudding user response：

React possesses one-way data flow, i.e parent to child . one approach is to define state in a component which is parent to both Home and ItemInfo i.e App but that's not a good approach. Second is to use Context Api or other state management tools like redux, flux etc. reactjs.org/docs/context.html (for 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}){

CodePudding user response：

You're already using useHistory from react-router. This would allow you to push a state along with the route change. The state is where you can pass the array.

// 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] });

You can then dereference that state in the second component from props.location.state.someArray.

Of course, you'll need to change your ItemInfo component to accept props.

More here: https://v5.reactrouter.com/web/api/history