Parece haber cierta confusión con qué usar sobre el otro:
<Link to='/some/path'>
<Redirect to='/some/path'/>
history.push('/some/path')
He estado usando React/Router por un tiempo, y diferentes publicaciones/respuestas dicen cosas diferentes sobre cuándo usarlas y, a veces, no se alinean con lo que dijo otra persona. Así que creo que necesito alguna aclaración sobre esto.
Link
y esta documentación :Proporciona navegación declarativa y accesible alrededor de su aplicación.
Redirect
y esta documentación :Navegará a una nueva ubicación. La nueva ubicación anulará la ubicación actual en la pila de historial, como lo hacen las redirecciones del lado del servidor (HTTP 3xx).
Parece que todas las publicaciones que he leído, casi todos usan Redirect
para navegar por la aplicación, y nadie recomienda usar Link
como en esta publicación .
Ahora el history
puede hacer lo mismo que Link
y Redirect
, excepto que tengo un seguimiento de la pila del historial.
Pregunta 1: ¿Cuándo querría usar Link
vs Redirect
, cuál es el caso de uso sobre el otro?
Pregunta 2: dado que el history
puede enrutar a un usuario a otra ubicación en la aplicación con la ventaja adicional de la pila de historial, ¿siempre debo usar el objeto de historial al enrutar?
Pregunta 3: si quiero enrutar fuera de la aplicación, ¿cuál es el mejor método para hacerlo? Etiqueta de anclaje, Window.location.href, Redirigir, Enlace, ¿ninguno de los anteriores?
En primer lugar, realmente recomendaría leer este sitio:
https://reacttraining.com/react-router/web/api/BrowserRouter
El BrowserRouter
de React Router mantiene la pila de historial por usted, lo que significa que rara vez necesita modificarla manualmente.
Pero respondiendo a tus preguntas:
Respuesta 1: querrá usar Link
o NavLink
en casi todos los casos de uso. Sin embargo, la Redirect
es útil en situaciones específicas, un ejemplo es cuando se muestra una página 404 cuando el usuario intenta acceder a una ruta no definida. Redirect
redirigirá al usuario de la ruta 404 a una nueva ruta de su elección y luego reemplazará la última entrada en la pila de historial con la ruta redirigida.
Esto significa que el usuario no podrá presionar el botón Atrás de su navegador y regresar a la ruta 404.
Link
NavLink
y Redirect
usan la API de historial del enrutador bajo el capó, el uso de estos componentes en lugar del historial manualmente significa que está seguro de cualquier cambio en la API de historial en el futuro. El uso de estos componentes prepara su código para el futuro.
Respuesta 2: BrowserRouter
mantiene la pila de historial por usted, en general, mi opinión es que desea mantenerse alejado de actualizarlo manualmente donde pueda.
Respuesta 3: Aquí hay algunos ejemplos de enlaces de reacción externos:
<Route path='/external' component={() => window.location = 'https://external.com/path'}/>
<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>
target='_blank'
abrirá el enlace en una nueva pestaña, pero asegúrese de incluir rel='noopener noreferrer'
para evitar vulnerabilidades