es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo utilizar React Routing Navigate en lugar de Redirect en react-router-dom v6

Vi esto en un tutorial

En el componente de navegación

<li><navlink to='/'>Home</navlink></li>

En otro componente

import Navigation from './Headers/Navigation'
import Home from './Body/Home'
<navigation></navigation>
<switch>
<route path='/' exact="" component="{Home}"></route>
<redirect from='/' to='/Home/'></redirect>
<switch></switch>

Intenté aprender la última actualización e intenté el código anterior de la siguiente manera:

<routes>
<route path='/' element=""></route><navigate to='/Home'></navigate>} />
<routes>

Pero lo que realmente quiero no funciona.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que el código original estaba utilizando la biblioteca react-router-dom para manejar la navegación y el enrutamiento, mientras que la actualización intentada está utilizando la nueva sintaxis de react-router v6.

    En el código original, el componente Navigation incluye un componente NavLink que define un enlace cliclable a la página de inicio. En otro componente, se importa y utiliza la biblioteca react-router-dom para renderizar el componente Navigation y configurar las rutas. El componente Switch se utiliza para definir las rutas y el componente Route establece la ruta y el componente para renderizar la página de inicio. El componente Redirect se utiliza para redirigir cualquier solicitud a la ruta raíz a la página de inicio.

    En la actualización intentada, se utiliza el componente Routes para definir las rutas en lugar del componente Switch. El componente Route sigue siendo utilizado para definir la página de inicio, pero la propiedad path se establece en “/” en lugar de “/Home”. El componente Navigate se utiliza para redirigir cualquier solicitud a la ruta raíz a la página de inicio.

    No está claro cuál es el resultado deseado, pero parece que la actualización intentada no funciona como se pretende. Quizás sea necesario realizar más solución de problemas o refactorización para lograr el resultado deseado.

Comments are closed.