web-dev-qa-db-de.com

React-Router v4-Seitenaktualisierung funktioniert nicht

Vermutlich fehlt mir der Verlauf oder etwas anderes, aber wenn ich refresheine Seite auf einer untergeordneten Route wie /login oder einer anderen Route, die ich erhalte:

403 Verboten

Code: AccessDenied Nachricht: Zugriff verweigert RequestId: 075CAA73BDC6F1B9 HostId: O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYyet + HDv8t

Denken Sie daran, dass die Routen gut funktionieren, solange ich sie nicht aktualisiere.
Nehmen wir also an, ich gehe zu /der Homepage). Darauf befindet sich ein _ (Hyperlink, der dem Pfad /login in meinen Reaktionsrouter-Routen entspricht. Wenn ich auf den Hyperlink klicke, funktioniert dies einwandfrei. Die/login-Steuerung wird in "Reagieren" basierend auf meinen Reaktionsrouter-Routen wiedergegeben. Nur wenn ich eine Seite aktualisiere, auf der ich mich befinde, wird der obige Fehler angezeigt.

Auch wenn ich meinen Bucket synchronisiere, lese ich ihn öffentlich und bin mir nicht sicher, warum ich diesen Berechtigungsfehler erhalte:

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

Hier ist ein Beispiel für einige Routen und eine Komponente:

      <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)

Jetzt habe ich ein paar sich wiederholende Codes weggelassen und dies zeigt im Grunde genommen, dass ich hier nur Folgendes für das Routing habe: Wenn sie sich erfolgreich anmelden, werden sie zu /dashboard umgeleitet. Mein Problem ist nicht das, umleiten funktioniert gut. Immer wenn ich eine any Seite aktualisiere, auf der ich mich befinde, wird die Route nicht erneut umgeleitet.

javascriptreactjsreduxreact-routerreact-redux
4
PositiveGuy

Dies liegt daran, dass Ihr Server versucht, direkt auf diese URL zuzugreifen. Sie haben zwei Möglichkeiten:

  1. Verwenden Sie den Hash-Router , der von React-Router v4 bereitgestellt wird. Die Routen sehen jetzt so aus: http://example.com/#/somePage

  2. Wenn Sie kein # in der URL haben möchten, müssen Sie das Serververhalten ändern. Diese Konfiguration ändert sich für verschiedene Server. Wenn Sie im Entwicklungsmodus den webpack-dev-server verwenden, aktivieren Sie einfach historyApiFallback. Suchen Sie im Produktionsmodus, wie Sie 403/404 Antworten mithilfe des von Ihnen verwendeten Servers umleiten können.

5
arracso

Es gibt einen Unterschied zwischen clientseitigem und serverseitigem Routing. Dies wurde in einer Billion Beiträge und anderen Orten abgedeckt. Wenn Ihre clientseitige Reaktions-App sie auf eine bestimmte Route umleitet, entspricht dies NICHT der manuellen Eingabe dieser Route im Browser (der den Server kontaktiert und versucht, diese SPEZIFISCHE Route abzurufen).

Wenn Sie also eine Route im Frontend haben, sagen Sie:

<Route component={Potato} exact path='/potato' />

in Ihrem Back-End gibt es jedoch nichts, das Anforderungen an diesen Pfad verarbeitet. Wenn Sie dann manuell zu dieser URL wechseln oder diese URL aktualisieren, wird Ihre App automatisch gekackt.

Stellen Sie sicher, dass Sie im Back-End eine Fangroute haben, etwa so:

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

im Grunde genommen eine catch all-Route, die nur Ihre index.html zurückgibt

Achten Sie auch darauf, das clientseitige und das serverseitige Routing nachzuschlagen, da dies zu Problemen beim Aktualisieren der Seite und beim manuellen Navigieren zu bestimmten URLs mit React Router führen kann

1
Jayce444

Bei der Bereitstellung meiner App zum Erstellen und Reagieren auf Heroku ist ein ähnliches Problem aufgetreten. Die App funktioniert einwandfrei, bis eine Subroute aktualisiert wird. Die Art und Weise, wie ich es behoben habe, war das Hinzufügen dieser Datei in meinem Stammverzeichnis. Ich bin mir nicht sicher, ob dies bei aws hilfreich ist.

static.json

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