Ionic React Typescript - 将包含字符串和列表的对象传递给路由器

Question

我需要将 initialList 传递到下一页，什么是最好的方法。我应该使用 context api 或 redux 之类的状态管理，还是有其他方法可以做到这一点？这是我在不同页面中使用数据的唯一情况，我觉得状态管理可能有点矫枉过正。

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>

Answer 1

数据可以通过 state 发送到 react-router 中的 pathname。 routerLink 也继承自 react-router.
Link can also be used instead

更改 IonButton routerLink 如下。

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

像这样配置 NextPage。

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