Implementé mi sitio con Netlify y tengo problemas con el enrutamiento.
Aquí está mi sitio web: https://redux-co.netlify.com/
Y mi repositorio de GitHub: https://github.com/jenna-m/redux-co
Específicamente, si un usuario navega a cualquier página además de la página de inicio y actualiza la página, se muestra el Netlify 404 predeterminado. Desde la página 404, si vuelvo a la página de inicio y actualizo, se muestra la página de inicio.
Además, mi página 404 personalizada no funciona como lo hace cuando estoy en localhost:3000 , pero me gustaría resolver este problema de actualización primero antes de tratar con mi componente 404 personalizado.
Estoy usando React y react-router, y entiendo que dado que estoy usando react-router, mi sitio web no se implementará de inmediato.
Este es mi archivo _redirects , que está en la carpeta /public con mi archivo index.html :
/* /index.html 200 Esta es mi “build” ubicada en package.json :
… "scripts": { "start": "react-scripts start", "build": "react-scripts build && cp build/index.html build/404.html", "test": "react-scripts test", "eject": "react-scripts eject" } …He leído acerca de otras personas que experimentan esto y lo que han hecho para superar el problema. Esto es lo que he mencionado hasta ahora...
https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/
https://hugogiraudel.com/2017/05/13/using-create-react-app-on-netlify/
Esta persona estaba usando Vue y no React, pero probé estas soluciones de todos modos:
https://github.com/vuejs/vuepress/issues/457#issuecomment-390206649
https://github.com/vuejs/vuepress/issues/457#issuecomment-463745656
Esto fue simple y funcionó para mí . Encontré este enlace https://create-react-app.dev/docs/deployment#netlify
Entonces, como sugiere ese enlace, agregué un archivo _redirects dentro de la carpeta / /public como /public/_redirects . Luego pegué /* /index.html 200 en el archivo _redirects . Hice todo eso en mi VS Code, después de lo cual presioné a github y luego, por supuesto, mi netlify se vuelve a implementar automáticamente cada vez que presiono a github. Mi problema se resolvió y actualizar ya no trae el error 404.
En mi paquete.json, la sección de compilación se ve así;
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } Nota: algunos artículos dicen que necesita agregar _redirects en la carpeta de build , pero luego la carpeta de compilación no se encuentra entre lo que se envía a github en mi caso, por eso es que agregar _redirects a la carpeta public funcionó mejor para mí, ya que la carpeta pública puede ser empujado junto con mi código.
Agregue el archivo netlify.toml al directorio raíz de su proyecto y pegue el siguiente código en él:
[[redirects]] from = "/*" to = "/" status = 200presione y vuelva a implementar su aplicación y listo.
Elimine _redirects de su carpeta pública y mueva netlify.toml a la raíz de su repositorio git, más información . También elimine del script de compilación && cp build/index.html build/404.html - ya no lo necesita