0
395
ViewsLos enlaces de la aplicación React JS arrojan el error 404 en el servidor en vivo pero funcionan en localhost
Tengo esta compilación de la aplicación reaccionar js con create-react-app. Uso react-router-dom para las rutas. Cuando visito cualquier enlace directamente, por ejemplo, URL/productos, arrojará una página de error 404. pero si voy a esa página desde el enlace de la aplicación, funcionará directamente. Pero ambas formas están funcionando perfectamente en desarrollo. Solo recibo este error en producción.
Está alojado en DigitalOcean
Esta es mi configuración de app.js:
<Router> <NavBar /> <Switch> <Route exact path={`${process.env.PUBLIC_URL}/`} component={Home} /> <Route path={`${process.env.PUBLIC_URL}/products`} component={Products} /> <Route path={`${process.env.PUBLIC_URL}/category/:category`} component={Category} />Por favor, ayúdeme a ver lo que estoy haciendo mal y sugiera una solución.
3 answers
Answer question0
Soy capaz de arreglar esto. El problema no es con React. Es con Digital Ocean.
Tengo que configurar catchall en APP SPEC haciendo esto
Usando la interfaz de usuario del panel de la nube: inicie sesión y haga clic en Aplicación > Configuración >> haga clic en el nombre del componente > desplácese hacia abajo hasta Página personalizada > Editar página personalizada y seleccione Catchall > Ingrese index.html en el bloque de nombre de la página > Guardar
0
Agregue un archivo web.config con el siguiente código:
<?xml version="1.0"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="React Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>0
Resolví esto en el servidor de DigitalOcean con react y vite .
Instalar en Digital Ocean
- Cree una nueva aplicación en Digital Ocean, asegúrese de que sea un
static site. - Cuando lo ubique funcionando correctamente, pruebe si funciona con subrutas como www.yourweb.com/subrute
Último paso: resolver la recarga de la aplicación conduce al sitio 404
- Descargue la especificación actual de la aplicación desde https://cloud.digitalocean.com/apps , en la pestaña de configuración encontrará la especificación de la aplicación en el archivo
yourappname.yaml - Añadir
catchall_document: index.html - Pruebe si funciona con rutas como www.yourweb.com/subrute
- si no: Usando la interfaz de usuario del panel de la nube: inicie sesión y haga clic en Aplicación > Configuración >> haga clic en el nombre del componente > desplácese hacia abajo hasta Página personalizada > Editar página personalizada y seleccione Catchall > Ingrese index.html en el bloque de nombre de la página > Guardar
Ejemplo en
Next: Next.js tiene una configuración que funcionó para mí: ennext.config.js, configure trailingSlashes: true. Esto genera el diseño de página estático como /subpage/index.html, que luego se puede servir en /subpage.
Fuente: Plataforma APP: la recarga de la aplicación conduce al sitio 404
Espero que sirva como guía para alguien que pueda encontrar una solución general.