Перезагрузка маршрутизации/синхронизации браузера ReactJS на /path приводит к ошибке Cannot Get/Path

Я создаю базовое приложение React/Flux и использую компонент react-router для маршрутизации, синхронизацию браузера для перезагрузки в реальном времени при изменении сборки и браузер для внедрения зависимостей.

У меня проблема в том, что когда перезагрузка в реальном времени или любая перезагрузка происходит по пути, отличному от / (т. е. /profile, /gallery и т. д.), я получаю сообщение об ошибке Cannot GET /path (или любой маршрут для этого дело).

Я подозреваю, что это как-то связано с тем, что это одностраничное приложение, и вся маршрутизация выполняется на клиенте.

Вот моя настройка синхронизации браузера (это очень просто). Я думаю, что мне может понадобиться добавить промежуточное программное обеспечение, но я не уверен, что на самом деле добавить в промежуточное программное обеспечение.

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: './client'
        },
        notify: false
    });
});

reactjs single-page-application url-routing browser-sync
person JoshSGman    schedule 10.09.2014    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Вероятно, это связано с тем, что любой веб-сервер, который вы используете для обслуживания своего приложения, пытается найти /profile или /gallery на стороне сервера. Вам нужно проинструктировать свой сервер, что ВСЕ запросы к чему-либо направляются к root. Иногда, в зависимости от вашего программного обеспечения, это называется «режим HTML 5».

Я заметил, что в репозитории Git с синхронизацией браузера есть сообщение об этом с возможными решениями здесь: https://github.com/shakyShane/browser-sync/issues/204

Но основная идея состоит в том, чтобы заставить сервер отправлять все, что не является *.js или *.css, в ./index.html (при условии, что это файл точки входа вашего приложения). Таким образом, сервер не ищет эти маршруты сам, а просто загружает ваше приложение, которое затем может правильно анализировать их на стороне клиента.

Надеюсь это поможет.

person Mike Driver    schedule 13.09.2014
comment
Это сделало это! Благодарю вас! - person JoshSGman; 13.09.2014

arrow_upward
8
arrow_downward

Если вы используете browserSync, это будет выглядеть так:

var historyApiFallback = require('connect-history-api-fallback');


server : {
          baseDir:'./(anydirectory)',
          middleware: [ historyApiFallback() ]
        }
person vikas0713    schedule 19.11.2015
comment
При использовании Webpack поместите промежуточное ПО historyApiFallback() перед промежуточным ПО Webpack. - person InSuperposition; 28.04.2016