Javascript React Js前端和Express后端-can'；不要正确加载静态文件_Javascript_Reactjs_Express

Javascript React Js前端和Express后端-can'；不要正确加载静态文件

javascript reactjs express

Javascript React Js前端和Express后端-can'；不要正确加载静态文件,javascript,reactjs,express,Javascript,Reactjs,Express,我在前端有一个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');

我在前端有一个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")
    );

我的express后端：

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

当我单击链接时，所有效果都很好-所有渲染都正确。但当我刷新同一页时，我得到了空白页。 My 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>

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

...
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
...
<script src="/bundle.js"></script>

。。。
...

尝试在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>

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

...
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
...
<script src="/bundle.js"></script>

。。。
...

尝试将所有其他内容（如图像、css…）置于静态路径下。。。像

/static

一样，创建一个到该路径的路由，这样浏览器就可以找到这些资源。问题是静态文件没有显示，或者刷新路由时没有正确显示？@BradBumbalough-问题是-当我加载index.html时-它向我的后端请求bundle.js文件。它必须由app.use（express.static（uu dirname+/public））处理；但是它是由app.get（“*”…@LucasKatayama）处理的，我明白你的想法。谢谢你。我认为它可以被视为一个解决方案。但是对于我使用的app.use（express.static（u dirname+“/public”））；那么这意味着我不再需要它了？哦，现在我明白了问题…你正在使用相对路径…当你调用l./stylesheets/当你刷新页面时，比如说/react route/X…它将调用/react router/X/stylesheet…尝试使用绝对路径，这样它就可以由express处理。静态尝试放置所有其他内容（如图像、css…）在静态路径下…如

/static

并创建到该路径的路由，以便浏览器可以找到这些资源是静态文件未显示或刷新路由时未正确显示的问题？@BradBumbalough-问题是-当我加载index.html时-它向我的后端请求bundle.js文件。它必须e由app.use（express.static（uu dirname+/public'）处理，但它由app.get（'*'…@LucasKatayama）处理。我明白你的想法。谢谢。我认为这可能是一个解决方案。但对于我使用的app.use（express.static（u dirname+/public'））；那么这意味着我不再需要它了？哦，现在我明白了问题…你在使用相对路径…当你调用l./stylesheets/当你刷新页面时，比如说/react route/X…它将调用/react router/X/样式表…试着使用绝对路径，这样它可以由express处理。static我相信你有正确的解决方案！我的解决方案更适合你本地服务器目录中的绝对路径。传统上，我认为人们对静态文件使用

/public

。无论哪种方式，没有绝对路径都是不相关的。我相信你有正确的解决方案！我的解决方案更多的是对本地服务器目录中的绝对路径。传统上，我认为人们对静态文件使用

/public

文件…无论哪种方式，没有绝对路径都是不相关的。