React Router 在保留历史记录的同时返回两页

问题描述

当有人试图访问 ex /account/dashboard 的受限路线时，我们需要让他登录，然后将他重定向回 /account/dashboard 页面。我们的登录路径历史看起来像

• /登录
• /verify-otp

使用 React Router 的历史记录对象如何在用户成功登录后将用户重定向回 /account/dashboard。

验证 OTP 操作

export const verifyOTP = data => async (dispatch,getState) => {
    const { userId,profileCompleted } = getState().user
    await svysh.post(`/customer/verify-otp/${userId}`,{ otp: Number(data) })
        .then((response) => {
            let verified = response.data.error ? false : true
            let token = response.data.error ? null : response.data.data.access_token
            let tokenExpiry = response.data.error ? null : Date.parse(response.data.data.expires_at)
            let isSignedIn = token ? true : false
            let errorCode = response.data.error ? response.data.code : null

            dispatch({
                type: actionTypes.VERIFY_OTP,accesstoken: token,accesstokenExpiry: tokenExpiry,verfied: verified,isSignedIn: isSignedIn,error: response.data.error,errorCode: errorCode,message: response.data.message
            })

            dispatch(setLoading(false))

            if (verified && !profileCompleted) {
                history.push('/complete-profile')
            } else if (!verified) {
                history.push('/verify')
            } else {
                window.history.go(-2)
            }
        })
        .catch(error => {
            console.log('Catch Error',error)
            dispatch(setLoading(false))
        })
}

解决方法

所以为了解决这个问题，我创建了一个单独的 LinkItem 组件，现在将这个组件用于我的应用程序中的所有链接。当有人点击链接时，我在商店中设置了一个引荐变量，在有人登录后，我查看引荐来源是否存在我重定向到引荐来源，如果没有，我重定向到主页。

链接项

import LinkItem from '../../../extras/LinkItem'

<LinkItem
    to='/account/orders'
    list='true'
    text='Orders'
/>                      

链接组件

import { ListItem } from '@material-ui/core'

class LinkItem extends React.Component {

    handleReferrer() {
        const { to } = this.props
        this.props.setReferrer(to)
    }

    render() {
        const { list,to,text } = this.props
        return (
            <>
                {list &&
                    <ListItem
                        component='a'
                        disableGutters
                        href={to}
                        onClick={() => this.handleReferrer()}
                    >
                        {text}
                    </ListItem>
                }
            </>
        )
    }
}

在 OTP 验证时重定向

export const verifyOTP = data => async (dispatch,getState) => {
    const { userId,profileCompleted } = getState().user
    const { referrer } = getState().global
    await svysh.post(`/customer/verify-otp/${userId}`,{ otp: Number(data) })
        .then((response) => {
            let verified = response.data.error ? false : true
            let token = response.data.error ? null : response.data.data.access_token
            let tokenExpiry = response.data.error ? null : Date.parse(response.data.data.expires_at)
            let isSignedIn = token ? true : false
            let errorCode = response.data.error ? response.data.code : null

            dispatch({
                type: actionTypes.VERIFY_OTP,accessToken: token,accessTokenExpiry: tokenExpiry,verfied: verified,isSignedIn: isSignedIn,error: response.data.error,errorCode: errorCode,message: response.data.message
            })

            dispatch(setLoading(false))

            if (verified && !profileCompleted) {
                history.push('/complete-profile')
            } else if (!verified) {
                history.push('/verify')
            } else {
                if (referrer) {
                    history.push(referrer)
                } else {
                    history.push('/')
                }
                
            }
        })
        .catch(error => {
            console.log('Catch Error',error)
            dispatch(setLoading(false))
        })
}

编辑： @ajmnz 建议采用这种方法