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

Мне всегда было интересно, как маршрутизация React работает в одностраничном приложении. Например, когда я хочу перейти на https://example.com/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.


reactjs node.js react-router
person longcc    schedule 20.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Например:

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

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

person Agney    schedule 20.05.2018
comment
Спасибо. Но по некоторым причинам это не работает. Промежуточное ПО express.static каким-то образом перехватывает подмаршруты. Мне пришлось использовать app.use(function(req,res){res.sendFile(path.join(__dirname, 'build', 'index.html'));}); И теперь это работает. - person longcc; 20.05.2018