it-roy-ru.com

Обновление страницы React-router v4 не работает

Я, вероятно, пропускаю историю или что-то в этом роде, но когда я обновляю страницу на дополнительном маршруте, таком как /login, или любые другие маршруты, которые я получаю:

403 Запрещено

Код: AccessDenied Сообщение: Отказано в доступе RequestId: 075CAA73BDC6F1B9 HostId: O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYYet = HDv8c

Имейте в виду, что маршруты работают нормально, пока я не обновляюсь.
Итак, допустим, я захожу на / (домашняя страница). На нем у меня есть гиперссылка, которая отображается на путь /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. Моя проблема не в том, перенаправление работает нормально. Каждый раз, когда я обновляю любую страницу, на которой я работаю, она не перенаправляется снова.

4
PositiveGuy

Это потому, что ваш сервер пытается перейти на этот URL-адрес напрямую. У вас есть два варианта:

  1. Используйте хэш-маршрутизатор , предоставленный реагирующим маршрутизатором 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

Также убедитесь, что вы просматриваете клиентскую и серверную маршрутизацию, потому что это вызовет проблемы с обновлением страницы и ручной навигацией по определенным URL с помощью React Router.

1
Jayce444

При развертывании моего приложения create-реагировать на heroku я столкнулся с подобной проблемой, приложение работает нормально, пока не обновится в подчиненном маршруте. Я исправил это, добавив этот файл в мой корневой каталог. Не уверен, поможет ли это вам в aws.

static.json

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