Express не загружает страницу, только возвращает json

Question

Проблема возникает, когда после перезагрузки страницы сервер возвращает только json вместо этой страницы

Я использую React и возвращаю файлы stati c из папки сборки, также есть express дескрипторы маршрутизация, она воспроизводится только в производственном режиме при запуске localhost все в порядке

app.use('/auth', authRoutes);
app.use('/user', userRoutes);
app.use(['/dota2', '/csgo', '/lol'], generalRoutes);

if (process.env.REACT_APP_ENV === 'production') {
  console.log('Production is running');
  app.use('/', express.static(path.join(__dirname, '../build')));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../build', 'index.html'));
  });
}

Есть маршруты

const router = Router();

router.get('/live', liveMatches);
router.get('/upcoming', upcomingMatches);
router.get('/past', pastMatches);
router.get('/:matchId', getMatchById);
router.get('/opponents/:tournamentId', opponents);
router.post('/past-team-matches', pastTeamMatches);

Вы можете посетить mySite и вы увидите json в качестве результата, но если вы очистите matchId в URL-адресе и щелкните любое совпадение, страница загрузится как обычно

Также есть response-router

<ServiceRoute
            key={key}
            path={['/dota2', '/csgo', '/lol']}
            exact
            access
            component={Matches}
          />
          <ServiceRoute
            key={key}
            path={['/dota2/:matchId', '/csgo/:matchId', '/lol/:matchId']}
            exact
            access
            component={MatchInfo}
          />

Answer 1

Давайте проследим сопоставление маршрута, которое выполняет express в этом случае:

1. При поиске /dota2/566624 он будет соответствовать здесь: app.use(['/dota2', '/csgo', '/lol'], generalRoutes); и вернет JSON.
2. При поиске /dota2 он не будет соответствовать app.use(['/dota2', '/csgo', '/lol'], generalRoutes);, поэтому он будет продолжать работу, пока не совпадет с app.get('*', (req, res) => {, обслуживая страницу React.

Проблема, которую я вижу здесь , заключается в том, что вы используете одни и те же маршруты для API и внешней маршрутизации в React. В идеале, при обслуживании API и интерфейсного приложения с одного и того же сервера вы должны префикс маршрутов API, чтобы они не добавляли sh к интерфейсным маршрутам. Допустим, вы добавили к маршрутам API префикс: /api. Теперь у вас есть:

app.use('/api/auth', authRoutes);
app.use('/api/user', userRoutes);
app.use(['/api/dota2', '/api/csgo', '/api/lol'], generalRoutes);

// ... everything is the same down here

1. /api/dota2/566624. Будет соответствовать конечной точке, которая возвращает JSON при первой загрузке.
2. /dota2/566624. Не будет соответствовать конечной точке JSON и будет следовать до маршрута '*', который загружает приложение React, позже, после загрузки приложения, этот маршрут будет обрабатываться маршрутизатором, который вы используете в приложении React.

Не добавляйте префикс, как в приведенном выше примере, используйте const router = Router();, который вы использовали для этой цели. Я жестко запрограммировал префикс, чтобы пример был кратким.

Последний вопрос: Почему этого не происходит при разработке? У меня нет всей информации, кроме что я вижу, вы обслуживаете интерфейсное приложение с другого сервера, чем тот, на котором запущен API; в этом случае у вас не будет конфликта маршрутов, поскольку они являются серверами с разных портов, например, интерфейс обслуживается на localhost:8080, а API обслуживается на localhost:5000.

Надеюсь, это поможет! прокомментируйте, если вам нужна информация!