Implementé la build/
carpeta de mi sitio web de React en un depósito de AWS S3.
Si voy a www.mywebsite.com
, funciona y si hago clic en a
etiqueta para ir a las páginas Proyecto y Acerca de, me lleva a la página correcta. Sin embargo, si copio y envío la URL de la página o voy directamente al enlace como: www.mywebsite.com/projects
, devuelve 404.
Aquí está mi código App.js
:
const App = () => ( <Router> <div> <NavBar/> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/projects" component={Projects}/> <Route exact path="/about" component={About}/> <Route component={NoMatch}/> </Switch> </div> </Router> );
No estoy seguro si ya lo has solucionado. Tuve el mismo problema.
Es porque AWS S3 está buscando esa carpeta (proyectos) para servir, que no tiene.
Simplemente dirija el documento de error a index.html
.
Esto funcionó para mí. Puede manejar páginas de error en react-router.
Actualización 1 de mayo de 2020:
Como esta publicación es bastante activa, necesito actualizar la respuesta:
Así que tienes algunas opciones para resolver el problema:
react-router
: maneja las solicitudes del front-end y enruta a los usuarios a otras rutas, pero en general, la aplicación React es una aplicación de una sola página.Puede colocar un archivo de error designado error.html en la carpeta pública de su aplicación React y en el alojamiento del sitio web estático : cuadro de documento de error , coloque: error.html . Esto también funciona. lo he probado
Use AWS CloudFront > Distribuciones de CloudFront > La distribución de su depósito > Páginas de error y agregue el código de error que desee. Si no usa react-router
(como el ejemplo a continuación), el depósito responderá con el Error 403 para que pueda responder con su error.html .
TypeScript
, actualmente react-router
no lo admite, por lo que debe considerar las opciones 2 y 3 . Van a actualizar la biblioteca en la futura versión 6.*
según este hilo .En caso de que este depósito de S3 se sirva desde una distribución de CloudFront :
Cree una página de error personalizada (AWS Docs) en la distribución de CloudFront que enruta los errores 404 a index.html y devuelve el código de respuesta 200. De esta manera, su aplicación manejará el enrutamiento.