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。

Answer 2

问题

重定向目标路径是"shipping"而不是"/shipping"。 react-router-dom@6中有相对路径和绝对路径。区别很简单，绝对路径以 "/" 字符开头，而相对路径则不是。 navigate("shipping") 会将"shipping" 附加到当前pathname 的末尾并导航到那里。

解决方案

导航时在前面加上前导"/"：

navigate(`/${navigateLog}`, { replace: true });

或者在您最初导航时包括它：

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

您可能还想使用 useSearchParams 挂钩来访问 redirect 查询参数，而不是依赖它位于特定的字符串位置。

function LoginScreen() {
  const navigateLog = useNavigate();
  const [searchParams] = useSearchParams();

  ...

  const redirect = searchParams.get("redirect") || '/';
    
  ...

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

  ...

请注意，在发出命令式重定向时，我已经将一个选项对象包含到指定replace: true 的navigate 函数，这是发出 REPLACE 操作而不是 PUSH 操作。