Как обслуживать приложение реагировать с помощью node.js?

Question

Мне всегда было интересно, как работает маршрутизация React в одностраничном приложении.Например, когда я хочу перейти на https://example.com/a.Откуда он знает, что «a» - это маршрут React в example.com, и он не пытается перейти на https://example.com/a/, которого не существует.

Теперь у меня проблема с этим.Я создал одностраничное приложение React с маршрутизацией.И разместите собранную версию с помощью node.js со следующим кодом:

const express = require('express');
const path = require('path');
app.use(express.static(path.join(__dirname, 'build_webpack')));
app.listen(3000, function() {
    console.log('Listening on ' + port);
})

Когда я перехожу на localhost: 3000 и перехожу к localhost: 3000 / route в приложении, все работает нормально.Однако, если я наберу localhost: 3000 / route в браузере и нажму enter.Возникла ошибка, из-за которой:

Refused to load the font '<URL>' because it violates the following Content Security
Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set,
so 'default-src' is used as a fallback."

Это та же ошибка, что и при попытке посетить несуществующий маршрут: localhost: 3000 / routeThatDoesntExist.

Я думаю, чтопроблема может заключаться в том, как я сервер приложение с помощью node.js.

Answer 1

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

Например:

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

Создание документов приложения React