如何在 Ionic 7 中将状态传递给 IonRouterLink？

Question

我正在使用 ionic 7 和 React 18。我有这个路由器链接

              routerLink='/contact'
              style={{ color: 'blue', cursor: 'pointer', marginLeft: '4px' }}
            >

如何将状态变量（prevPath）添加到链接，以便在通过访问链接访问的组件上，我可以使用访问状态

type ContactComponentProps = {
  contact: Contact | null
}
...
  const location = useLocation<LocationState>();
    ...
          const url = location.state?.prevPath || '/home';

Answer 1

在 Ionic React 的上下文中，

IonRouterLink

主要使用

href

等属性来促进导航，用于指定目标 URL 和

routerDirection

用于过渡动画。

如果您需要将状态传递给 React 应用程序中的路由，通常会使用

Link

包中的 react-router-dom

 组件

。这将允许您通过 state

 属性传递状态，并且可以使用 

useLocation

 钩子

在目标路由中访问该状态。

import { Link } from 'react-router-dom';

// your component code

<Link to="/your-route" state={{ yourStateData }}>Link Text</Link>

在目标组件中，您可以通过以下方式访问此状态：

import { useLocation } from 'react-router-dom';

// your component code

const location = useLocation();
const stateData = location.state;