Bagaimana cara menyajikan aplikasi reaksi dengan node.js?

Saya selalu bertanya-tanya bagaimana cara kerja perutean React di aplikasi satu halaman. Misalnya, ketika saya ingin membuka https://example.com/a . Bagaimana ia mengetahui "a" adalah rute React di example.com, dan tidak mencoba membuka https://example.com/a/ yang tidak ada.

Sekarang saya punya masalah dengan itu. Saya membuat satu halaman aplikasi React dengan routing. Dan host versi yang dibuat dengan node.js dengan kode berikut:

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);
})

Saat saya membuka localhost:3000, dan menavigasi ke localhost:3000/route di dalam aplikasi, itu berfungsi dengan baik. Namun jika saya mengetik localhost:3000/route di browser dan tekan enter. Ada kesalahan yang dikeluhkan tentang:

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."

Kesalahan yang sama yang saya dapatkan ketika mencoba mengunjungi rute yang tidak ada: localhost:3000/routeThatDoesntExist.

Saya pikir masalahnya mungkin bagaimana saya server aplikasi dengan node.js.


reactjs node.js react-router
person longcc    schedule 20.05.2018    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Anda perlu memberi tahu server untuk mengirim index.html pada rute mana pun yang ditemuinya.

Misalnya:

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

Buat Dokumen Aplikasi React

person Agney    schedule 20.05.2018
comment
Terima kasih. Namun karena beberapa alasan, hal itu tidak berhasil. Middleware express.static entah bagaimana menangkap subroute. Saya harus menggunakan app.use(function(req,res){res.sendFile(path.join(__dirname, 'build', 'index.html'));}); Dan sekarang berhasil. - person longcc; 20.05.2018