Реагирующие маршруты не работают в построении создания-реакции-приложения facebook

Question

Я использую маршрутизатор для определения маршрутов. И я использую create-react-app для разработки. Мой вопрос: если я набираю url для подстраниц в адресной строке и пытаюсь посетить его, работает в сборке разработки, но не в сборке.

Я использую аа простой экспресс-сервер для размещения производства построить

var express = require('express'), 
    app = express(), 
    http = require('http'), 
    httpServer = http.Server(app); 

app.use(express.static(__dirname + '/build')); 

app.get('/', function(req, res) { 
    res.sendfile(__dirname + '/index.html'); 
}); 
app.listen(3001); 

Answer 1

Вы должны настроить свой веб-сервер, чтобы служить той же странице для всех маршрутов, которые вы определили, или реализовать на стороне сервера визуализации в React , Веб-сервер разработки, вероятно, настроен как таковой, но производственный (Apache? Nginx? Что-то еще?) Не является. This question может помочь.

Причина, по которой это происходит, заключается в том, что React используется для создания одностраничных приложений. У вас есть одна традиционная веб-страница, которая, скорее всего, загружает некоторые скрипты - результат вашего процесса сборки, а затем эти скрипты позаботятся обо всем остальном. Это включает в себя создание нового DOM, выполнение запросов к «серверу» для данных и даже приведение в действие многостраничного поведения приложения, манипулирование URL-адресом при изменении представлений. Этот последний бит - это то, что реагирует маршрутизатор.

Однако веб-серверы обычно не обращают внимания на эти вещи. Они знают, как обслуживать URL-адреса. И когда вы запрашиваете yourdomain.com/, они будут обслуживать эту главную страницу, но когда вы попросите yourdomain.com/some/page/123, они не будут знать, что обслуживать, если они не настроены специально. И одна конфигурация также должна возвращать содержимое главной страницы для этих других URL-адресов. React-router забирает URL-адрес и использует соответствующие компоненты, поэтому все будет выглядеть нормально.