0
フロントエンドにReactアプリがあります。ここでのルートです：React JsフロントエンドとExpressバックエンド - 静的ファイルを正しくロードできません。
var React = require("react");
var ReactDOM = require("react-dom");
var {Route, Router, IndexRoute, browserHistory} = require("react-router");
var Main = require("Main");
var BlogList = require('BlogList');
var Blogpost = require('Blogpost');
var NewBlog = require('NewBlog');
var EditBlog = require('EditBlog');
var NotFound404 = require('NotFound404');
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={Main}>
<IndexRoute component={BlogList} />
<Route path="blogs/new" component={NewBlog} />
<Route path="blogs/:id/edit" component={EditBlog} />
<Route path="blogs/:id" component={Blogpost} />
<Route path='404' component={NotFound404} />
<Route path='*' component={NotFound404} />
</Route>
</Router>,
document.getElementById("app")
);
、ここではpublicディレクトリからのindex.htmlです：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./stylesheets/app.css">
<title>MERN Blog</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
マイ特急バックエンド：
app.use(express.static(__dirname + '/public'));
.....
//index route
app.get("/api/blogs", function(request, response){
...
});
//show route
app.get("/api/blogs/:id", function(request, response){
...
});
app.get('*', function (request, response){
response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
});
すべて私がリンクをクリックしたときに正常に動作します - すべてのレンダリング正しい。 しかし、同じページを更新すると、空白のページが表示されます。 私のindex.htmlはいくつかのファイル - bundle.jsなどをロードします。そして、それらの要求はバックエンドからの "*"ルートによって処理され、index.htmlも返されます。
静的ファイルを正しく処理する方法を教えてください。
は、他のすべてを（入れてみてください静的なパスの下にある...のような静的なパスの下にある... /）とそのルートを作成するので、ブラウザはそれらのリソースを見つけることができます –
静的ファイルが表示されない、正しく表示されないルートをリフレッシュしますか？ –
@BradBumbalough - 問題は - index.htmlをロードすると、私のバックエンドにbundle.jsファイルの要求を出します。それはapp.use（express.static（__ dirname + '/ public'））によって処理されなければなりません。しかし、代わりにapp.get（ '*' ...によって処理されます。 – kurumkan