重定向react-router-dom v6

Question

我有一个问题，在YouTube上观看使用

history.push('/login?redirect=shipping')

的视频，如何使用

navigate

修改它，因为如果我使用字符串

navigate ('/ login?redirect=shipping')

，即使登录它也会返回主页并且不会转到发货页面。

我是这样解决问题的：

 const checkoutHandler = () => {
       if(!userInfo){
          navigate('/login')
       } else{
          navigate('/shipping')
       }
    }

Answer 1

你的解决方案很好。 我可以填补一些空白吗？

1. 我们需要获取用户的状态来检查用户是否登录才能继续执行 if 语句。

2. 此后您的解决方案将起作用。

   import React from 'react'
   import { useNavigate } from 'react-router-dom'
   import { useSelector } from 'react-redux'
   //....some imports
   
   const CartScreen = () => {
   //.......some code before
     const navigate = useNavigate()
     const userLogin = useSelector((state) => state.userLogin)
     const { userInfo } = userLogin
   
     const checkoutHandler = () => {
       if (!userInfo) {
       navigate('/login')
       } else {
         navigate('/shipping')
       }
     }
   
     //...return JSX...
   

Answer 2

**试试这个。

const navigate = useNavigate()
const checkoutHandler = () => {
    navigate('/signin?redirect=/shipping')
}

Answer 3

试试这个...

navigate ('/login?redirect=/shipping')

发货前在redirect=后添加正斜杠“/”， 这样做，将执行第一个登录路线，然后它将重定向到运输。

Answer 4

这个问题你解决了吗？如果您遇到同样的问题，那么我建议您进入登录页面并进行一些更改。

导入 useHistory 和 useLocation：

import { Link, useHistory, useLocation } from 'react-router-dom'

然后在函数中应用这个：

const history = useHistory();
const location = useLocation();

Answer 5

const checkoutHandler = ()=>{ 导航（'/登录？重定向=/运输'）

}