javascript - React Router Dom，useNavigate 不重定向到正确的 url 路径

Question

在较旧的 React Router Dom 版本中，如果用户已登录，我可以使用此代码进行重定向:

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

现在在 v6 中，我正在使用 useNavigate 函数而不是 history.push 但它不起作用，因为它将我带到 /login/shipping 而不是 /shipping。目前这是我的导航代码:

let navigateCart = useNavigate() 
// some code here
navigateCart('/login?redirect=shipping') // the mistake is inside the parenthesis here but i dont know what it is!

这是我的路由器配置:

<BrowserRouter>
  <Container>
    <Routes>
      <Route path="/" element={<HomeScreen />} exact />
      <Route path="/login" element={<LoginScreen />} />
      <Route path="/profile" element={<ProfileScreen />} />
      <Route path="/shipping" element={<ShippingScreen />} />
    </Routes>
  </Container>
</BrowserRouter>

登录屏幕功能:

function LoginScreen() {

    let navigateLog = useNavigate()
    let location = useLocation()

    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const dispatch = useDispatch()

    const redirect = location.search ? location.search.split('=')[1] : '/'
    

    const userLogin = useSelector(state => state.userLogin)
    const { error, loading, userInfo } = userLogin


    useEffect(() => {
        if (userInfo) {
            navigateLog(redirect)
        }
    }, [navigateLog, userInfo, redirect])

    const submitHandler = (e) => {
        e.preventDefault()
        dispatch(login(email, password))
    }

Answer 1

将 LoginScreen 中 useEffect 中的 navigateLog(redirect) 行更改为这一行:

navigateLog(`/${redirect}`);

在你的情况下，它重定向到 /login/shipping 而不是 /shipping，因为它就像你正在调用 navigateLog("shipping") 因为 redirect 等于 "shipping"，所以它被用作相对路径。这意味着它考虑了您当前的 url，在您的情况下是 /login。

这是一个有效的 CodeSandbox您的代码的简化版本。