¿Cómo puedo redirigir en React Router v6?

5 minutos de lectura

Avatar de usuario de Hongbo Miao
hongbo miao

Estoy tratando de actualizar a React Router v6 (react-router-dom 6.0.1).

Aquí está mi código actualizado:

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route render={() => <Navigate to="/" />} />
  </Routes>
</BrowserRouter>

El último Route está redirigiendo el resto de caminos a /.

Sin embargo, tengo un error.

TS2322: Escriba ‘{ renderizar: () => Elemento; }’ no se puede asignar al tipo ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’. La propiedad ‘render’ no existe en el tipo ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’.

Sin embargo, basado en la documentacióntiene render por Route. ¿Cómo puedo usarlo correctamente?

  • Esto parece un error en los documentos. Date cuenta cómo justo en la sección de arriba ellos/ellas/Uds. render en favor de children? Pero parece que la sección que estabas leyendo habla sobre la actualización de v5 a v5.1, solo eliminaron render en v6. Parece <Route element={<Navigate to="/" />} /> es el nuevo estilo.

    – Bergi

    7 de noviembre de 2021 a las 1:40

  • gist.github.com/mjackson/…

    – Bergi

    7 de noviembre de 2021 a las 1:44

  • también de gist.github.com/mjackson/…: “Cuando finalmente actualice a v6, convierta <Route render={() => ...}> a <Route element={...}> y tu estas listo.

    – Bergi

    7 de noviembre de 2021 a las 1:48

  • Gracias @Bergi, lo logré con algunas actualizaciones: <Route path="*" element={<Navigate to="/" />} />siéntase libre de publicar como respuesta!

    – Hongbo Miao

    7 de noviembre de 2021 a las 6:06

Avatar de usuario de RodolfoSilva
Rodolfo Silva

Creo que deberías usar el enfoque de ruta sin coincidencias.

Verifique esto en la documentación: Adición de una ruta “Sin coincidencia”

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

Para mantener limpio el historial, debe configurar replace apuntalar. Esto evitará redireccionamientos adicionales después de que el usuario vuelva a hacer clic.

  • Si desea redirigir componentes de reacción externos o sin ganchos, consulte esta respuesta.

    – totymedli

    10 de febrero a las 6:56

  • Y si / es una ruta principal a esos otros? ¿Cómo previenes / en sí mismo de ser una ruta a la que se puede navegar? Y en su lugar redirigir / decir /home cuando home es un niño menor /?

    –Douglas Gaskell

    24 abr a las 8:52

  • Vale la pena señalar que esto no tiene soporte SSR para enrutamiento estático 👍🏻

    – Neil

    11 de mayo a las 10:46

  • @KashifAli en ese caso, debe reemplazar el componente de navegación con su pantalla personalizada No encontrado. No creo que pueda tener ambos usando una ruta comodín. Pero puede usar un enfoque anidado para limitar cuándo se debe redirigir al usuario dentro de alguna ruta.

    – Rodolfo Silva

    16 de junio a las 18:00

  • ¿Hay documentos api en Navegar y reemplazar? Parece que debería haberme detenido con los documentos, pero de alguna manera terminé aquí.

    – Manos frías

    19 de septiembre a las 11:37

Avatar de usuario de Hamedo Esk
Hamedo Esk

Encontré otra manera de hacer esto:

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();

useEffect(() => {
   if (LoggedIn){
      return navigate("/");
   }
},[LoggedIn]);

Ver Resumen, Navegación.

  • Dice que useNavigator solo se puede usar en el contexto del enrutador. No se puede usar solo.

    – Zain Sadaqat

    16 oct a las 14:32

Cree el archivo RequireAuth.tsx

import { useLocation, Navigate } from "react-router-dom";
import { useAuth } from "../hooks/Auth";

export function RequireAuth({ children }: { children: JSX.Element }) {
  let { user } = useAuth();
  let location = useLocation();

  if (!user) {
    return <Navigate to="/" state={{ from: location }} replace />;
  } else {
    return children;
  }
}

Importe el componente para que el usuario necesite un enrutador privado:

import { Routes as Switch, Route } from "react-router-dom";

import { RequireAuth } from "./RequireAuth";
import { SignIn } from "../pages/SignIn";
import { Dashboard } from "../pages/Dashboard";

export function Routes() {
  return (
    <Switch>
      <Route path="/" element={<SignIn />} />
      <Route
        path="/dashboard"
        element={
          <RequireAuth>
            <Dashboard />
          </RequireAuth>
        }
      />
    </Switch>
  );
}

Avatar de usuario de Ayush Nanda
Ayush Nanda

En la versión 5 de React, es decir, reaccionar-enrutador-dom, teníamos el componente Redirigir. Pero en la versión 6 de React se actualiza a los componentes de Navigate.

Podemos pasar replace en estos componentes para evitar redireccionamientos innecesarios al hacer clic en la opción de avance y retroceso.

La demostración de uso se adjunta a continuación:

<Route  path="/" element={user ? <Home /> : <Register />} />
<Route path="/login" element={user ? <Navigate to="/" replace /> :  <Login />}  />
<Route path = "/register" element={user ? <Navigate to="/" replace /> :  <Register />} />

avatar de usuario de sepideh khodabakhshian
sepideh khodabakhshian

import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";

const component =()=>{

    const navigate = useNavigate();

    const handelGoToLogin = () => {
        navigate('/auth/login')
    }

    return(<>
        //.........
    
        <Button onClick={handelGoToLogin} variant="outlined" color="primary" size="large" fullWidth>
             Back
        </Button>

    </>)
}

Avatar de usuario de Md Saif Uddin
Md. Saif Uddin

import { useState } from "react"
import { Navigate } from "react-router-dom"
const [login, setLogin] = useState(true)
return (<>
{!login && <Navigate to="/login" />}
<>)

avatar de usuario de gyozo kudor
gyozo kudor

      <BrowserRouter>
        <Routes>
          <Route path="/home" index element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Navigate to="/home" replace />} />
        </Routes>
      </BrowserRouter>

¿Ha sido útil esta solución?