Мой сайт React / Redux с React Router даже не отвечает на AWS (S3)

Question

Я очень новичок в разработке React и у меня проблема с развертыванием.

Я подозреваю, что Reaction-router-Dom после некоторых исследований, но я не могу понять проблему.

Я полностью застрял в этой проблеме в течение нескольких дней.

Любая помощь будет высоко оценена.

Проблема

Мой веб-сайт React даже не отвечает, когда он развернут на AWS / S3.Когда я пытаюсь получить доступ к странице, через несколько минут ожидания появляется предупреждение «Не отвечает».

Дополнительная информация
Я понял, что это также происходит на локальном хосте.Когда я использую команду yarn start, браузер Chrome отображает мой веб-сайт React.Однако когда я пытаюсь получить доступ к той же странице на локальном хосте в других браузерах, страница не отвечает.

Что я пробовал до сих пор

• Добавьте файл .htaccess в каталог / public /, как показано ниже.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

• Разверните другой веб-сайт без реакции-router-dom или reduxчтобы увидеть, связана ли проблема с тем, как я развертываю или нет (все работало нормально)
• Разверните другой веб-сайт с помощью redux (все работало нормально)
• Добавьте "homepage": "http://my-react-app-bucket-name.s3-website-us-west-1.amazonaws.com" в package.json
• Добавление "homepage": "https://s3-us-west-1.amazonaws.com/my-react-app-bucket-name" в package.json
• Комментарий <Switch></Switch>, включая <Route> (работает просто отлично).

Что я используюна сайте

• create-реакции-приложение (для создания приложения)
• React-роутер
• Redux
• Redux-thunk
• Redux-persist

Подозрительная часть кода

index.js

// Configure redux-persist
const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, reducers)

// Just to apply Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(thunk)))

const persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.querySelector('#root')
)

App.js

  render() {
    return (
      <div>
        <Router history={history}>
          <div>
            <Header onTermSubmit={this.onTermSubmit} />
            <div className="main-wrapper">
              <div className="ui container">
                <Switch>
                  <Route path="/" exact component={Home} />
                  <Route path="/detail/:id" component={Detail} />
                </Switch>
              </div>
            </div>
          </div>
        </Router>
      </div>
    )
  }

history.js (Пользовательская история для реакции-маршрутизацииэ)

import createHistory from 'history/createBrowserHistory'

export default createHistory()

Answer 1

Я понял это сам.

Причиной всего этого была моя глупая ошибка.

Внутри функции mapStateToProps у меня была некоторая логика, отличная от соединения данных в Redux Store с компонентами.props.

Я просто забыл правило, что мы не помещаем никакой логики в mapStateToProps ...

Answer 2

Вы пытались установить индексную страницу по умолчанию в вашей корзине S3?Также проверьте в журнале ошибок в консоли или попробуйте получить доступ к нему в другом браузере.Надеюсь, это поможет.

После этого добавьте Deploy в ваш файл пакета.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "deploy": "aws s3 sync build/ s3://wonderful-app",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}