react router: how to get hidden parameters attached to url when doing history.push(url)?

Question

I have the following code for a board component that is the main display on a website page.

A modal pop up window is defined such that when the url is matched with history.push(url) somewhere else in the code base, a corresponding modal window shall pop up and display on top of the current page. Clicking different buttons will open the modal window for corresponding items.

I'm stuck with the following situation:

Say there are two ways to trigger the same modal window of an item to open:

1. Clicking a button will open the modal window for the item;

2. drap and drop the button to some box will also open the modal window for the item.

The code is as below:

import React, { useState, Fragment } from "react";
import { Route, useRouteMatch, useHistory, Switch } from 'react-router-dom';

const Board = () => {
  const match = useRouteMatch();
  const history = useHistory();

  ... other code ...

  return (
      <Fragment>
      
      ... some other components ...

      <Route
        path={`${match.path}/items/:itemId`}
        render={routeProps => (
          <Modal
            isOpen
            onClose={()=>history.push(match.url)}
            renderContent={modal => (
              <PopupWindow
                itemId={routeProps.match.params.itemId}
                test={routeProps.match.state.trigger}
              />
            )}
          />
        )}
      />
    </Fragment>
  );
}

In other scripts, I have defined button components like this:

        <ItemLink
          to={{
            pathname: `${match.url}/items/${item.id}`,
            state: { trigger: 'fromClick'}
          }}
          ref={provided.innerRef}
        >
          <Item>
            <Title>{item.title}</Title>
            <Bottom>
              <div>
               ... some code ...
              </div>
            </Bottom>
          </Item>
        </ItemLink>

such that clicking different buttons will open the modal window for corresponding items.

and for method 2, drap and drop the button to some box will also open the modal window for the item:

  const match = useRouteMatch();
  const history = useHistory(); 

  const handleItemDrop = () => {
      
      ... some code ...

      history.push({
        pathname: `${match.url}/items/${itemId}`,
        state: {trigger: 'fromClick'}
      })
      
    }

such that when item is dropped, history.push(url) is triggered and the modal window should pop up.

I'm passing a hidden parameter state.trigger to record how the url is triggered.

However, I got the following error:

TypeError: Cannot read property 'trigger' of undefined
renderContent
src/components/Board.js:99
   96 | renderContent={modal => (
   97 |   <PopupWindow
   98 |     itemId={routeProps.match.params.itemId}
>  99 |     test={routeProps.match.state.trigger}
      | ^  100 

How can I get the hidden parameter?

Answer 1

I got the answer myself 5 minutes after posting this question:

change routeProps.match.state.trigger

to

routeProps.location.state.trigger