kur*_*kan 1 javascript express reactjs
我在前端有一个 React 应用程序。以下是路线：
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 总是被返回。
如何正确处理静态文件？
尝试在 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>
当您在/route/x/y/z 之类的路径中刷新页面并加载 index.html 然后尝试加载相对 css（例如）/route/x/y/z/时，会出现使用相对路径和browserHistory 的问题样式表/app.css
当您使用绝对路径时，它将由您的 express.static 处理
app.use(express.static(__dirname + '/public'));
它将加载 index.html 并尝试加载将被正确处理的 /stylesheets/app.css ......像这样
...
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
...
<script src="/bundle.js"></script>
| 归档时间： |
|
| 查看次数： |
2129 次 |
| 最近记录： |