英文:
Navigate the user to another URL using useNavigate() of react-router-dom-v6
问题
我正在开发一个React 18应用程序，尝试通过单击前往结账按钮，将访客用户从购物车页面导航到运输页面（URL：localhost:3000/shipping）。单击按钮后，用户应首先被重定向到登录页面，在那里他应该登录（在SigninScreen页面），然后前往运输页面。
单击前往结账按钮时的当前URL为（URL：localhost:3000/signin?redirect=shipping）。
在SignInScreen页面上单击SignIn按钮后，我在useEffect()钩子中执行重定向：
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
const userSignin = useSelector((state) => state.userSignin);
const { userInfo, loading, error } = userSignin;
const [searchParams] = useSearchParams();
const redirectUrl = searchParams.get('redirect') || '/';
const navigate = useNavigate();
useEffect(() => {
// 如果用户已登录，则应将用户重定向到运输页面。
if (userInfo) {
navigate(redirectUrl, {replace: true});
}
}, [userInfo, redirectUrl, navigate]);
即使使用了{replace: true}，用户仍然未被导航到localhost:3000/shipping，而是被重定向到localhost:3000/signin/shipping。
请问有人能指导我做错了什么吗？
尝试过：即使使用了{replace: true}，用户仍然未被导航到localhost:3000/shipping，而是被重定向到localhost:3000/signin/shipping。
期望：用户应在登录页面上单击“登录”按钮后，从localhost:3000/signin?redirect=shipping导航到localhost:3000/shipping。
英文:
I am working on a React 18 application and I am trying to navigate the guest user to the shipping page (URL: localhost:3000/shipping) from the cart page by clicking the Proceed to Checkout button. On clicking the button, the user should be first re-directed to the sign in page where he should sign in (on the SigninScreen page) and then proceed to the shipping page.
The current url when clicking the Proceed to Checkout button is (URL: localhost:3000/signin?redirect=shipping)
On clicking the SignIn button on the SignInScreen page I do a redirect in the useEffect() hook:
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
const userSignin = useSelector((state) => state.userSignin);
const { userInfo, loading, error } = userSignin;
const [searchParams] = useSearchParams();
const redirectUrl = searchParams.get('redirect') || '/';
const navigate = useNavigate();
useEffect(() => {
// If the user is logged in, the user should redirected to the shipping page.
if (userInfo) {
navigate(redirectUrl, {replace: true});
}
}, [userInfo, redirectUrl, navigate]);
Even after using {replace: true} the user does not get navigated to localhost:3000/shipping, instead it gets redirected to localhost:3000/signin/shipping
Could someone please guide me on what am I doing wrong?
Tried: Even after using {replace: true} the user does not get navigated to localhost:3000/shipping, instead it gets redirected to localhost:3000/signin/shipping
Expectation: The user should navigate to localhost:3000/shipping from localhost:3000/signin?redirect=shipping on signing the user in on the sign in screen by clicking the Sign In button
答案1
得分: 1
URLs如果不以/开头，则被视为相对于当前路径的链接。您将用户导航到shipping，但应该是/shipping。
以下是添加斜杠的一种方法：
const redirectUrl = '/' + (searchParams.get('redirect') || '');
英文:
URLs which do not start with a / are treated as relative links to the current route. You are navigating the user to shipping when it should be /shipping.
Here’s one way to add the starting slash:
const redirectUrl = '/' + (searchParams.get('redirect') || '');
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论