React Router не работает на Digital Ocean - PullRequest
Новая
       8

React Router не работает на Digital Ocean

0 голосов
/ 26 октября 2018

У меня есть сайт, на котором React работает в Digital Ocean с pm2 и NGINX.Точка входа "/" загружается просто отлично, но когда я пытаюсь перейти к маршруту "/: username", я просто получаю 404 Not Found.Мои маршруты определены в App.jsx следующим образом: 

<Switch>
     <Route
            exact path='/'
            render={
              routeProps => <Front {...routeProps} />
            }
          />
          <Route
            path='/:username'
            render={
              routeProps => <Profile handleSignOut={ this.handleSignOut } {...routeProps} />
            }
          />
        </Switch>

index.js имеет следующий код: 

ReactDOM.render(<BrowserRouter>
                  <App />
                </BrowserRouter>,
                 document.getElementById('root')
 )

Все маршруты работают, как ожидается, при локальном запуске с npm run start.

1 Ответ

0 голосов
/ 27 октября 2018

Это очень распространенная проблема для одностраничных приложений, написанных на разных платформах, таких как React или Angular.

Эта проблема, однако, не имеет отношения к платформам.Скорее, он заключается в механизме маршрутизации в браузере.Это на самом деле не настоящий маршрут.Когда вы открываете одностраничное приложение, обслуживается простой файл index.html, а когда вы перемещаетесь внутри приложения, платформа заботится о рендеринге новой страницы и имитации события навигации (чтобы оно было записано в браузере).история и URL меняются).

Но когда вы попадаете на подадрес, такой как «myapp.com/some-page», сервер попытается создать действительный каталог под названием «myapp.com/».some-page ', а не ваш index.html файл, который вам, очевидно, нужен для запуска приложения, и, поскольку этот каталог не существует, он выдаст ошибку 404.

Чтобы это исправить, вам необходимо перенастроить сервер, чтобы в случае ошибки 404 вместо сбоя он возвращал файл index.html;таким образом, ваш код будет загружен, и базовая структура будет обрабатывать маршрутизацию для отображения правильной страницы.

...