Question

我的前端有一个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等。这些请求由＆＃34; *＆＃34;处理。来自后端的路由 - 并且返回了index.html。

如何正确处理静态文件？

Answer 1

尝试在index.html中使用绝对路径

当您在 / route / x / y / z 等路径中刷新页面时，会出现使用相对路径和 browserHistory 的问题加载index.html然后它尝试加载相对css（例如） /route/x/y/z/stylesheets/app.css

当您使用绝对路径时，它将由您的express.static

处理

<!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>

它将加载index.html并尝试加载/stylesheets/app.css，这将正确处理...像这样

app.use(express.static(__dirname + '/public'));

React Js前端和Express后端 - 无法正确加载静态文件

1 个答案: