0
351
Vistasel enrutador de reacción no funciona en el depósito aws s3
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> );3 Respuestas
Responde la pregunta0
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.
0
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:
- Puede poner index.html en el cuadro de documento de error (como sugirió Alan Friedman).
- Vaya a su cubo (el que realmente tiene el código, no el que usa para redirigir) -> Propiedades -> Alojamiento de sitio web estático :
- Esto no es "hacky", pero funciona debido a la forma en que funciona el
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. - Si desea React del lado del servidor, considere usar Next.js.
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 .
- Para
TypeScript, actualmentereact-routerno lo admite, por lo que debe considerar las opciones 2 y 3 . Van a actualizar la biblioteca en la futura versión6.*según este hilo .
0
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.
Páginas de error personalizadas
