ionic （react）路由跳转、传参

ionic（react）框架下的路由跳转

ionic的路由跳转其实有很多种方式跳转

<IonItem detail={false} routerLink={`/shareDetail`}>点我跳转</IonItem>
<IonItem detail={false} herf="/shareDetail">点我跳转</IonItem>
....

像上面这样都可以跳转到shareDetail页面，简单列举了两例。可根据自己的业务需求选择。
如果需要l路由传递参数，可以这样：

<IonItem detail={false} routerLink={`/shareDetail?parame=` + '123'}>点我跳转</IonItem>

但是当我们需要跳转需要传递的参数是动态的，需要跳转前进行赋值，那这种方式就行不通了。可以使用history的方式进行跳转：

import { RouteComponentProps } from 'react-router';
interface ShareProps extends RouteComponentProps { }
const Share: React.FC<ShareProps> = ({ history }) => {

    async function handelToDetail(parame: any) {
        if (typeof item) {
        	//方式一
            history.push('/tabs/shareDetail?parame=' + parame)
            // 方式二
            history.push({pathname: '/tabs/shareDetail', state: parame})
        }
    }

    return (
        <IonPage id="shareStyle">
            <IonItem id='toDetail' slot="start" onClick={() => handelToDetail(parame)}>点我跳转</IonItem>
        </IonPage>
    )
}

export default Share;

这种方式跳转，我们就可以进行跳转前的操作了，在handelToDetail() 函数中，我们可以进行赋值操作 setState 或者 useState等等。

参数接受 :shareDetail.tsx中选择useIonViewWillEnter生命钩子，类似与react的componentWillMount()钩子。

    useIonViewWillEnter(async () => {
    	//方式一接受参数
        let parame = history.location.search  // 注意这里获取到的参数形式为: "?parame=******"  可自行处理
        //方式二的参数
        let parame = history.location.state
    })

这样我们就可以获取到我们通过history传递过来的参数啦。
两种方式的区别：
方式一：传递的参数会体现在url上面，因此传递的参数长度也有限制。参数参数获取的时候也是需要自己处理才能拿到。
方式二：传递的参数不会体现在路由上面，并且获取到的参数就是object形式，可直接读取。