无法使用此命令重定向 导航('/login？redirect=shipping') 在反应路由器 DOM 我正在使用版本 6

Question

我正在上一门课，在那门课上老师写了

const checkoutHandler = () => {
history.push('/login?redirect=shipping')
}

上面的代码在那个课程视频中工作正常，他正在登录并重定向到发货页面

现在我使用的是版本6，我将上面的代码更改为，我无法重定向到shipping

import {useNavigate} from 'react-router-dom';
const navigate=useNavigate();
const checkoutHandler=()=>{
navigate('/login?redirect=shipping')

}

和我不明白这是什么'/login?

导航=航运'命令做得很好，为什么我不能重定向。

绝笔

App.js
<Routes>
<Route path='/cart' element={<CartScreen/>}/>
<Route path='/login' element={<LoginScreen/>}/>
<Route path='/shipping' element={<ShippingScreen/>}/>
<Route path='/' element={<HomeScreen/>} exact/>
</Routes>

CartScreen, Click on Checkout.

const checkoutHandler=()=>{
navigate('/login?navigate=shipping')
}

进入登录页面填写表格，点击登录登录屏幕

const redirect = location.search ? 
location.search.split('=')[1] : '/'
useEffect(() => {
if (localStorage.getItem('userInfo') !== null) {
navigate(redirect)
}
}, [])
isSuccess && navigate('/')

Answer 1

Issue

问题是react-router-dom@6能够同时具有绝对和相对路径路由。区别在于绝对路径以"/"开头，而相对路径则没有。

重定向目标是"shipping"，因为queryString是"?redirect=shipping"

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

在LoginScreen组件中，代码正在访问位置。搜索and getting the"shipping"值并尝试导航到那里。

const redirect = location.search ? location.search.split('=')[1] : '/'
useEffect(() => {
if (localStorage.getItem('userInfo') !== null) {
navigate(redirect); // <-- navigate("shipping")
}
}, []);

这样做的结果是从当前路径"/login"到"/login/shipping"的相对导航，因为前面的"/"丢失了。

<标题>

解决方案使用useSearchParams钩子来访问queryString ()，而不是使用"hackish"字符串操作)，并正确导航到"/shipping"路由。

的例子:

import { useNavigate, useSearchParams } from 'react-router-dom';
...
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const redirect = searchParams.get("redirect");
useEffect(() => {
if (JSON.parse(localStorage.getItem('userInfo'))) {
navigate(`/${redirect}`); // <-- navigate("/shipping")
}
}, [redirect]);