리액터 v4 페이지 새로 고침이 작동하지 않음

리액터 v4 페이지 새로 고침이 작동하지 않음

내력 같은 것이 누락되어 있을 수도 있지만 다음과 같은 하위 경로의 페이지를 새로 고칠 때/login또는 내가 받는 다른 경로:

403 금지됨

코드: AccessDenied 메시지:액세스 거부 요청 ID: 075CAA73BDC6F1B9 HostId: O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RRznEhvUxdu8lFEHL0XcKw2L4W4J7VYET+HDv8tc=

내가 새로 고치지 않는 한 노선은 잘 통한다는 것을 명심해라.
그래서 내가 간다고 하자./(홈페이지)그 위에 경로에 매핑되는 하이퍼링크가 있다./login내 리액션 경로로 말이야하이퍼링크를 클릭하면 잘 작동하고 반응 라우터에 따라 /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내 문제는 그게 아니라 리디렉션은 잘 돼내가 있는 페이지마다 새로 고침할 때마다, 다시 라우팅되지 않아.

왜냐하면 당신의 서버가 그 URL로 직접 가려고 하기 때문이다.두 가지 옵션:

1. react-router v4에서 제공하는 해시 라우터를 사용하십시오.지금 루트는 다음과 같이 보일 것이다.http://example.com/#/somePage

2. URL에 #가 없는 경우 서버 동작을 변경해야 한다.이 구성은 디퓨렌츠 서버에 대해 변경된다.웹 팩-dev-server를 사용하는 경우 개발 모드에서 실행하십시오.historyApiFallback. 프로덕션 모드에서 사용할 서버를 사용하여 403/404 응답을 리디렉션하는 방법을 검색하십시오.

클라이언트측과 서버측 라우팅은 차이가 있다.이것은 수많은 게시물들과 다른 장소들로 덮여 있다.기본적으로, 당신의 클라이언트측 반응 앱이 그들을 특정 루트로 리디렉션한다면, 그것은 그들이 브라우저에 수동으로 그 루트를 입력하는 것과 같지 않다.

그러니 앞쪽 끝에 노선이 있다면 다음과 같이 말해라.

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

그러나 당신의 백엔드에는 해당 경로에 대한 요청을 처리한 다음, 수동으로 URL로 이동하거나 URL에서 언제 새로 고치면 당신의 앱이 스스로 변하게 될 것이다.

뒤쪽 끝에서 모든 경로를 잡을 수 있도록 하십시오.

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

기본적으로 인덱스를 반환하는 모든 경로 캐치.properties

또한 페이지를 새로 고치고 라우터 리액션으로 특정 URL을 수동으로 탐색하는 데 문제가 발생하므로 클라이언트 쪽과 서버 쪽 라우팅을 검색하십시오.

내 창조 리액트 앱을 Heroku에 배치했을 때, 나는 유사한 문제에 부딪혔고, 그 앱은 서브루트에서 새로 고쳐질 때까지 잘 작동한다.내가 고친 방법은 이 파일을 내 루트 디렉터리에 추가하는 것이었다.이것이 송곳 위에서 너에게 도움이 될지 확실하지 않다.

static.json

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

참조URL: https://stackoverflow.com/questions/45030285/react-router-v4-page-refresh-not-working