Минимального nodejs установки сервера необходимо для React с помощью реакции-маршрутизатора и browserHistory

Моего текущего server.js:Минимального nodejs установки сервера необходимо для React с помощью реакции-маршрутизатора и browserHistory

let express = require('express'); 
let harp = require('harp'); 
let path = require('path'); 

let app = express(); 

app.use(express.static(__dirname + "/dist")); 
app.use(harp.mount(__dirname + "/dist")); 

let port = process.env.PORT || 3333; 
app.listen(port,() => console.log("Listening on port " + port)); 

// ... other routes for data fetching ... 

// For browserHistory: https://github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/Histories.md 
app.get('*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html')); 
});

Это прекрасно работает, когда я начинаю навигацию mysite.com/. Однако, если я вхожу mySite.com/someRoute, он ломается. В частности, я вижу ниже в консоли:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3333/dashboards/styles/normalize-3.0.3.min.css". 
... 
Uncaught SyntaxError: Unexpected token < 
...

Я понимаю, что, чтобы исправить это, я также необходимо реализовать на стороне сервера визуализации. Это точно? Если да, то какова минимальная настройка, необходимая для этого? Все гиды, которые я видел, гораздо более глубокие, чем я хотел бы сейчас.

(Я прекрасные зависимости модернизируя, если это поможет.) реагировать: 0.14.7 реагируют-маршрутизатор: 1.0.3

источник

2016-03-11 Matthew Herbst

Предположим, что ваш файл CSS в вашей статической папке и что путь к файлу соответствует пути ниже __dirname + "/dist" и что вы НЕ навигации к /someRoute в вашем приложении, но направляя браузер на этот адрес через адресную строку, я что проблема заключается в том, что вы обслуживаете index.html, когда вам нужно обслуживать файл css. (Вы сообщили нам об ошибке, о которой сообщал браузер, но не о фактическом ответе от сервера для этого запроса.)

Это вызвано тем, что браузер направил mySite.com/someRoute. Теперь браузер считает, что /someRoute является корневым путем для всех запросов при использовании относительных URL-адресов. Поэтому, если для страницы index.html требуется assets/css/mysite.css. Браузер действительно отправит запрос для someRoute/assets/css/mysite.css. Вы можете проверить это, просмотрев вкладку сети в своем браузере.

Чтобы исправить это, установите тег base на / в <head>. Это позволит браузеру не префикс какого-либо пути относительных URL-адресов.

Пример:

<head> 
    <base href="/"> 
    <link > 
</head>

источник

2016-03-11 05:58:54

Делает полный смысл. Еще одна причина, по которой я всегда использую абсолютные пути. Благодаря! –

Вам не нужно использовать абсолютные пути, если вы используете базовый тег. –

Это не выглядит Реагировать специфична, но без более подробной информации ...

В вашем index.html вы включаете ссылку на файл CSS, хранящийся на том же сервере. У этого сервера есть правило маршрутизации для '*', которое возвращает index.html. Таким образом, каждый URL-адрес, доступ к которому на этом сервере будет возвращен index.html. Каждый раз.

Вы можете либо установить отдельное правило для обработки запросов на статические ресурсы (возможно, поместить их в отдельную папку?), Либо использовать ресурсы с другого сервера.

источник

2016-03-11 05:29:14 Yair

У меня есть много других маршрутов, которые я намеренно не включали, так как они бы просто беспорядок - см комментарий в примере. Помещение маршрута '' * '' в конец приводит к тому, что оно соответствует всем маршрутам, не связанным с предыдущим. –

Минимального nodejs установки сервера необходимо для React с помощью реакции-маршрутизатора и browserHistory

ответ

Смежные вопросы