En versiones anteriores de React Router Dom, pude usar este código para redirigir si el usuario inició sesión:
history.push('/login?redirect=shipping') Ahora en v6 estoy usando las funciones useNavigate en lugar de history.push pero no funciona porque me lleva a /login/shipping en lugar de /shipping . Actualmente este es mi código de navegación:
let navigateCart = useNavigate() // some code here navigateCart('/login?redirect=shipping') // the mistake is inside the parenthesis here but i dont know what it is!Esta es la configuración de mi enrutador:
<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>Función de la pantalla de inicio de sesión:
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)) }Cambie esta línea de registro de navigateLog(redirect) dentro de ese useEffect de uso en la pantalla de inicio de LoginScreen a esta:
navigateLog(`/${redirect}`); En su caso, está redirigiendo a /login/shipping en lugar de /shipping , porque es como si estuviera llamando a navigateLog("shipping") ya que la redirect es igual a "shipping" , por lo que se usa como una ruta relativa. Lo que significa que tiene en cuenta su URL actual, que en su caso es /login .
Aquí también hay un CodeSandbox en funcionamiento de una versión simplificada de su código.
La ruta de destino de redirección es "shipping" en lugar de "/shipping" . En react-router-dom@6 hay rutas relativas y rutas absolutas. La diferencia es simple, las rutas absolutas comienzan con un carácter "/" inicial, mientras que las rutas relativas no. navigate("shipping") agregará "shipping" al final de la pathname actual y navegará allí.
Puede anteponer el "/" inicial al navegar:
navigate(`/${navigateLog}`, { replace: true });O inclúyalo cuando navegue inicialmente:
navigateCart('/login?redirect=/shipping'); Es probable que también desee utilizar el useSearchParams para acceder al parámetro de consulta de redirect en lugar de confiar en que esté en una posición de cadena específica.
function LoginScreen() { const navigateLog = useNavigate(); const [searchParams] = useSearchParams(); ... const redirect = searchParams.get("redirect") || '/'; ... useEffect(() => { if (userInfo) { navigateLog(redirect, { redirect: true }); } }, [navigateLog, userInfo, redirect]) ... Tenga en cuenta que al emitir la redirección imperativa, he incluido un objeto de opciones en la función de navigate que especifica replace: true , esto es para emitir una acción REEMPLAZAR en lugar de una acción EMPUJAR.