フロントエンドでReactとReact-routerで動作するエクスプレスアプリケーションを作成しようとしています。だから、私はindex.htmlファイルを読み込み、反応ルータに残りのルーティングを処理させます。しかし、エクスプレスルートを持っていない反応ルータのURLを持つページをリフレッシュすると、明らかに{できない}というメッセージが表示されます。だから、ルートがないときに常にindex.htmlを返すすべてのルートの後にフォールバックルートを追加しました。Expressフォールバックルートはスタティックファイルにも使用されます
"/ api/..."、 "/"、 "*"へのルートがあるので、 "/ public/build"と "/ app/src/static /" 。 "/"を呼び出すとすべてがうまく動作しますが、 "*"を呼び出すとindex.htmlが読み込まれますが、index.jsとstyles.cssファイルにはindex.htmlのコンテンツが読み込まれます。そのため、私のブラウザはHTMLの束を含むstyles.cssファイルを取得しますが、 "/"ルートを使用する場合は、.jsファイルと.cssファイルが正しく読み込まれます。
"/"に移動すると、すべての静的ファイルでインデックスページが正しく読み込まれます。私は自分の反応ルータのDom NavLinkを使って、リクエストをサーバーに返さずに異なるビューにナビゲートすることができます。私は直接、任意の反応-ルータのDOMページをロードしようとすると、しかし、私は私のindex.htmlを得るが、私のindex.jsはStyles.cssを
私のコードで同じ、index.htmlに同じ内容を持っています
const app = express();
app.use(bodyParser.urlencoded({ extended: true}));
app.use(bodyParser.json());
passportConfig(passport);
app.use(passport.initialize());
app.use(passport.session());
app.use('/api/user', userRoutes);
app.use('/api', championRoutes);
app.use('/public/build', express.static(__dirname + '/public/ReactApp/build'));
app.use("/app/src/static/image", express.static(__dirname + '/public/ReactApp/src/static/image'));
app.use("/app/src/static/style", express.static(__dirname + '/public/ReactApp/src/static/style'));
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'index.html'));
});
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'index.html'));
});
app.listen(8080,() => {
console.log('started on port 8080');
});
userRoutes変数とchampionRoutes変数には、ルートがいくつか設定されているexpress.Routerオブジェクトが含まれています。
編集：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="app/src/static/style/styles.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="public/build/index.js"></script>
</body>
</html>
あなたがindex.html' 'で' index.js'ファイルが含まれているどのように投稿することができます？ – squgeim
@squgeim確かに完全なhtmlページの編集を参照してください –