Реакция маршрутов дает 404 при попытке попасть на маршруты с /: id

Question

Я унаследовал фреймворк для статического веб-сайта, который использует реагирует и реагирует на маршрутизатор-маршрутизатор для маршрутов. Мы хотим, чтобы веб-сайт мог поддерживать динамически загружаемый контент на страницах с помощью идентификатора.

Например, у меня есть страница / Articles, на которой перечислены все статьи, и когда вы нажимаете на одну из перечисленных статей, она открывает url / article / ABCDEFG, а затем загружает компонент страницы Article и извлекает данные для этого конкретного Я бы. Это работает полностью на локальном устройстве разработки, однако после развертывания в рабочей среде (размещенного в качестве веб-приложения Azure) у меня работают все страницы, кроме тех, которые имеют динамический URL.

Я довольно новичок, чтобы реагировать, но из того, что я прочитал, сайты со статической реакцией не могут использовать /: id, потому что он требует, чтобы каждая страница уже существовала.

Я выполнил поиск и попытался удалить все, что связано со статическим состоянием, с сервера и веб-конфигурации.

var express = require('express');
var serveStatic = require('serve-static');
var fallback = require('express-history-api-fallback');

var app = express();
var publicDir = path.resolve(__dirname, '../www');

// app.use('/', serveStatic(publicDir));
//app.use(fallback('index.html', { root: publicDir }));

app.listen(process.env.PORT);

Мои маршруты настроены так

    generateRoutes() {
        return (
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/about" component={About} />
                <Route exact path="/articles" component={Articles} />
                <Route path="/articles/:id" component={Article} />
                <Route exact path="/careers" component={Careers} />
                <Route exact path="/people" component={People} />
                <Route path="/profile/:id" component={Profile} />
            </Switch>
        );
    }

То, что я хочу, это когда я помещаю URL-адрес в адресную строку, например https://example.com/site/profile/246b9e73-5332-4afb-92b8-be5a061bd908, он отображает страницу профиля с этим идентификатором.

Вместо этого я получаю 404, говоря, что страница не может быть найдена. Я не уверен, преследую ли я кроличью нору со статичной / динамической идеей, но я потратил около 2 дней, пытаясь выяснить, почему это не работает, и я готов попробовать что-нибудь.

Answer 1

Раздел развертывание в create-реагировать-приложение уже решило эту проблему, заявив

Если вы используете маршрутизаторы, которые используют API истории pushState в HTML5 (например, React Router с browserHistory), многие статические файловые серверы выйдут из строя. Например, если вы использовали React Router с маршрутом для / todos / 42, сервер разработки будет правильно отвечать на localhost: 3000 / todos / 42, но Express, обслуживающий производственную сборку, как описано выше, не будет.

Это потому, что при загрузке новой страницы для / todos / 42, Сервер ищет файл build / todos / 42 и не находит его. сервер должен быть настроен для ответа на запрос к / todos / 42 выступающей index.html. Например, мы можем изменить наш экспресс-пример выше, чтобы служить index.html для любых неизвестных путей:

Итак, решение для вас - изменить

app.use('/', serveStatic(publicDir));

до

app.use('/*', serveStatic(publicDir));

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