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.

  • es.davy.ai/
  • Programación /
  • React Router no funciona cuando se refresca la página en Vercel. La aplicación fue creada con Vite+React.

React Router no funciona cuando se refresca la página en Vercel. La aplicación fue creada con Vite+React.

12 Jul, 2023 Programación

Por favor, sigue la imagen. Espero que entiendas mi problema.

He creado un sitio web utilizando react.js + vite. Después de desplegar en vercel, todo está bien. Pero voy a compartir un enlace de página que es https://photofolio-react-ref-sourov.vercel.app/create-page. Pero después de compartirlo, noté que el enlace no funciona. Sin embargo, si primero voy a la página de inicio y luego voy a esa ruta haciendo clic en el enlace, veo que funciona. No tuve este problema con la plantilla create-react-app, pero ahora estoy utilizando la plantilla vite react. Encontré el mismo problema en netlify, pero encontré una solución en la documentación. Ahora no encuentro ninguna solución. Por favor, comparte tu experiencia con este problema y soluciónalo. Si tienes algún problema con mi explicación, por favor comenta en esta pregunta.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para el problema de enlace no funcionando en React.js + Vite en Vercel

    Si estás enfrentando el problema donde un enlace específico no funciona después de desplegar tu sitio web en Vercel utilizando el template de React.js y Vite, entonces sigue la siguiente solución:

    1. Verifica si has añadido las rutas adecuadas en tu aplicación de React.js utilizando react-router.
    2. Asegúrate de añadir BrowserRouter o HashRouter en el componente de nivel superior de tu aplicación.
    3. Si has añadido el atributo exact a tu componente Route, asegúrate de removerlo. Esto puede causar problemas con el enrutamiento de Vercel.
    4. Añade el atributo base en tu BrowserRouter o HashRouter con la ruta de tu sitio web. Por ejemplo, si el dominio de tu sitio web es https://photofolio-react-ref-sourov.vercel.app/`, entonces añade`.
    5. Si las soluciones anteriores no funcionan, intenta añadir una regla de rewrite en tu configuración de Vercel para la página problemática. Añade esto en tu archivo vercel.json:
    {
  "rewrites": [
    {
      "source": "/create-page",
      "destination": "/index.html"
    }
  ]
}

    Esto redireccionará al usuario a la página de inicio y luego a la página específica desde allí, lo cual debería solucionar el problema.

    Esperemos que estas soluciones te ayuden a resolver el problema de enlace no funcionando en Vercel con React.js y el template de Vite.

Comments are closed.