React-router v4 Page Refresh Not Working

Viewed 12999

I am probably missing history or something but when I refresh a page on a sub route such as /login or any other routes I get:

403 Forbidden

Code: AccessDenied Message: Access Denied RequestId: 075CAA73BDC6F1B9 HostId: O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYYet+HDv8tc=

Keep in mind the routes work fine as long as I don't refresh.
So lets say I go to / (the homepage). On it, I have a hyperlink that maps to the path /login in my react-router routes. I click the hyperlink, it works fine, renders the /login control in react based on my react-router routes. It's only when I refresh any page I'm on that I get the error above.

Also when I sync my bucket I'm putting public read on it so not sure why I'm getting this permission error:

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

Here's an example of some routes and a component:

      <Provider store={store}>
        <Layout>
          <Switch>
            <Route component={Home} exact path='/' />
            <ProtectedRoute component={
DashboardContainer} path='/dashboard' />
            <Route component={LoginContainer} path='/login' />
            <Route component={NotFound} path='*' />
          </Switch>
        </Layout>
      </Provider>

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(
          <div>
            <Login
              login={this.handleLoginPressed}
            />
          </div>
          )
      }
    }

    const mapStateToProps = state => ({
      token: state.auth.token
    })

    export const mapDispatchToProps = {
      authenticate: AuthAsyncActions.authenticate
    }

    export { Login }
    export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

Now I've left out a bunch of repetitive code and this shows basically the only thing in here I have for routing is if they successfully log in, they're redirected to /dashboard. My problem isn't that, redirect works fine. It's whenever I refresh on any page I'm on, it doesn't re-route again.

3 Answers

When deploy my create-react app to heroku, I ran into similar issue, the app works fine until refresh on a subroute. The way I fixed it was adding this file in my root directory. Not sure if this will help you on aws.

static.json

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