Ionic React Typescript - Pass object that contains a string and list to router

Issue

I need to pass a initialList to next page and what would be the best approach. Should I use State management like context api or redux, or is there other ways to do this? This is the only case I am using the data in different pages, I feel maybe state management might be overkill.

interface ListInterface {
  listName: string;
  list: string[];
}

const [initialList, setinitialList] = useState<ListInterface>({ listName: "List 1", list: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'] });
...
<IonButton routerLink={"/list"}>Show List</IonButton>

Solution

Data can be sent via state to pathname in react-router. routerLink also inherits from react-router.
Link can also be used instead

Change IonButton routerLink as following.

routerLink={{
  pathname: "/nextpage",
  state: initialList
}}

Configure NextPage like this.

// Next page
const NextPage = ({ match, history }) => {
   const data = history.location.state;     <-------------

   return (
       <div>
          <h4>{data && data.listName}</h4>
          {data.list && data.list.map((listItem: any) => <li>{listItem}</li>)}
            )}
       </div>
    );
};

Example to try

Answered By - Nisuga Jayawardana