web-dev-qa-db-ja.com

React-routerv4ページの更新が機能しない

おそらく履歴などが欠落していますが、refresh/loginなどのサブルートまたは他のルートのページを取得すると次のようになります。

403禁止します

コード：AccessDeniedメッセージ：Access Denied RequestId：075CAA73BDC6F1B9 HostId：O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYYet + HDv8tc =

更新しない限り、ルートは正常に機能することを覚えておいてください。
では、/（ホームページ）に移動するとします。その上に、react-routerルートのパス/loginにマップするhyperlinkがあります。ハイパーリンクをクリックすると、正常に機能し、react-routerルートに基づいてreactで/ loginコントロールがレンダリングされます。 上記のエラーが発生するのは、表示しているページを更新したときのみです。

また、バケットを同期すると、パブリック読み取りが行われるため、このアクセス許可エラーが発生する理由がわかりません。

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

いくつかのルートとコンポーネントの例を次に示します。

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

今、私はたくさんの繰り返しコードを省略しました、そしてこれは基本的に私がルーティングのためにここに持っている唯一のものが彼らが正常にログインした場合、彼らは/dashboardにリダイレクトされることを示しています。私の問題はそれではありません、リダイレクトはうまくいきます。表示しているanyページを更新するたびに、再ルーティングされません。

javascriptreactjsreduxreact-routerreact-redux
5
PositiveGuy

これは、サーバーがそのURLに直接アクセスしようとするためです。 2つのオプションがあります。

  1. React-router v4が提供する ハッシュルーター を使用します。ルートは次のようになります：http://example.com/#/somePage

  2. URLに＃を付けたくない場合は、サーバーの動作を変更する必要があります。この構成は、異なるサーバーで変更されます。開発モードでwebpack-dev-serverを使用している場合は、historyApiFallbackを有効にするだけです。本番モードでは、使用するサーバーを使用して403/404応答をリダイレクトする方法を検索します。

5
arracso

クライアント側とサーバー側のルーティングには違いがあります。これは、数え切れないほどの投稿やその他の場所で取り上げられています。基本的に、クライアント側の反応アプリがそれらを特定のルートにリダイレクトする場合、それはブラウザーに手動でそのルートを入力するのと同じではありません（サーバーに接続してその特定のルートを取得しようとします）。

したがって、フロントエンドにルートがある場合は、次のように言います。

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

ただし、バックエンドには、上記のパスへのリクエストを処理するものがないため、手動でそのURLに移動するか、そのURLで更新すると、アプリがうんちを起こします。

バックエンドに次のようなキャッチオールルートがあることを確認してください。

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

基本的に、index.htmlを返すだけのキャッチオールルート

また、クライアント側とサーバー側のルーティングを必ず調べてください。これにより、ページの更新や、Reactルーター）を使用して特定のURLに手動で移動する際に問題が発生します。

1
Jayce444

Create-reactアプリをherokuにデプロイすると、同様の問題が発生しました。アプリはサブルートで更新されるまで正常に動作します。私が修正した方法は、このファイルをルートディレクトリに追加することでした。これがawsで役立つかどうかはわかりません。

static.json

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