React-router v4 Actualización de página no funciona

Probablemente me esté perdiendo el historial o algo así, pero cuando actualizo una página en una ruta secundaria como /login o cualquier otra ruta que obtengo:

403 Prohibido

Código: AccessDenied Mensaje: Access Denied RequestId: 075CAA73BDC6F1B9 HostId: O1n36xVCoeu / aLaSMrtCkAFZruWk5ZcO4RIrznEvvUxdu8lFEhL0Xckw2L4W4J7VYYetTVvvvvvvv2x4c4v4j4vcvvvvgxx8lFE

Tenga en cuenta que las rutas funcionan bien siempre y cuando no actualice.
Así que digamos que voy a / (la página de inicio). En él, tengo un hipervínculo que se asigna a la ruta /login de /login en las rutas de mi enrutador de reacción. Hago clic en el hipervínculo, funciona bien, hace que / el control de inicio de sesión reaccione según las rutas de mi enrutador de reacción. Solo cuando actualizo cualquier página en la que me encuentro, recibo el error anterior.

Además, cuando sincronizo mi cubeta, estoy poniendo lectura pública en él, así que no estoy seguro de por qué recibo este error de permiso:

aws s3 sync --acl public-read build s3://${bkt}

Aquí hay un ejemplo de algunas rutas y un componente:

            

LoginContainer

  import { connect } from 'react-redux' import React, { Component } from 'react' const _ = require('lodash') ... import Login from '../components/auth/Login/Login' class LoginContainer extends Component { constructor(props) { super(props) this.handleEmailInput = this.handleEmailInput.bind(this) ... rest of the handlers } async handleLoginPressed(e) { e.preventDefault() this.validateForm() await this.props.authenticate(this.state.email, this.state.password) if(this.props.isAuthenticated) { this.props.history.push('/dashboard') return } ... more code render(){ return( 
) } } const mapStateToProps = state => ({ token: state.auth.token }) export const mapDispatchToProps = { authenticate: AuthAsyncActions.authenticate } export { Login } export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

Ahora, he dejado fuera un montón de código repetitivo y esto muestra básicamente que lo único que tengo aquí para el enrutamiento es si inician sesión correctamente, se redirigen a /dashboard . Mi problema no es eso, la redirección funciona bien. Siempre que actualizo en cualquier página en la que estoy, no vuelve a enrutar.

Esto se debe a que su servidor intenta ir directamente a esa URL. Tienes dos opciones:

  1. Utilice el enrutador hash proporcionado por react-router v4. Las rutas ahora se verán así: http://example.com/#/somePage

  2. Si no te gusta tener un # en la URL, debes cambiar el comportamiento del servidor. Esta configuración cambia para diferentes servidores. En el modo de desarrollo, si está utilizando webpack-dev-server, simplemente habilite historyApiFallback . En el modo de producción, busque cómo redireccionar las respuestas 403/404 usando el servidor que usará.

Hay una diferencia entre el lado del cliente y el enrutamiento del lado del servidor. Esto ha sido cubierto en un squillion puestos y otros lugares. Básicamente, si la aplicación de reacción del lado del cliente los redirige a una ruta determinada, NO es lo mismo que ellos ingresando manualmente esa ruta en el navegador (que contacta con el servidor e intenta obtener esa ruta ESPECÍFICA).

Entonces, si tiene una ruta en la parte delantera, diga:

  

pero en su back-end no tiene algo que maneje las solicitudes de dicha ruta, y luego ir manualmente a esa URL o actualizarla cuando se encuentre en esa URL hará que su aplicación se eche a perder.

Asegúrate de tener una ruta con todas las capturas en tu back-end, algo como esto:

 app.get('*', (request, response) => { response.sendFile(path.resolve(__dirname, 'index.html')) }); 

Básicamente, una ruta de captura que solo devuelve su index.html

También asegúrese de buscar enrutamiento del lado del cliente o del lado del servidor, ya que esto causará problemas con la actualización de la página y la navegación manual a ciertas URL con React Router

Cuando implementé mi aplicación de creación-reacción en heroku, tuve un problema similar, la aplicación funciona bien hasta que se actualiza en una subruta. La forma en que lo arreglé fue agregando este archivo en mi directorio raíz. No estoy seguro de si esto te ayudará en aws.

static.json

 { "root": "build/", "clean_urls": false, "routes": { "/**": "index.html" } }