在Express服务器上使用react-router

我有一个由简单的Express服务器提供服务的React应用程序。 React应用程序正在webpack'd到我的根目录（server.js文件所在的目录）中名为dist的目录中。 dist文件夹包括index.html入口点，main.min.js JavaScript包以及所有其他静态资源（CSS，图像等）。在Express服务器上使用react-router

如果我访问该网站的根目录，例如localhost:3000/，index.html获得服务，它会加载JS包并找到所有其他资产。该应用程序使用react-router，通过点击按钮进行良好导航，并且链接将我带到localhost:3000/feature正常工作。

不过，如果我手动进入在localhost:3000/feature地址栏和类型，服务器对预期的index.html，而且在地方main.min.js供应index.html。这是因为快速服务器中的通配符路由映射为返回index.html。这是我在某些文章中看到的，但我不确定是否考虑过这种情况。

下面是相关的服务器代码片段：

app.use(express.static(path.join(__dirname))); 
app.get('*', function response(req, res) { 
    res.sendFile(path.join(__dirname, 'dist', 'index.html')); 
});

这是定义了服务器的路由。有没有更好的方式来做到这一点，这将允许手动更改地址？

这里是我的文件结构，如果有帮助：的index.html

|-root 
    |-server.js 
    |-webpack.config.js 
    |-dist/ 
    |-main.min.js 
    |-index.html 
    |-a2cea76fae187add3c974dcacf446eab.jpg 
    |-...etc

内容：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

<body> 
    <div id="root"><!-- React app --></div> 
    <script src="dist/main-631cea2c7e308b1dfb26.min.js"></script> 
</body> 
</html>

来源

2017-01-11 Alan Thomas

可能需要[这]（https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md） –

@IslamIbakaev这是唯一的解决办法？如果可以，我想避免服务器端渲染（现在）。 –

我不知道其他解决方案，我希望快速匹配路由我与反应路由器设置没有实际做“服务器端反应” –

这是因为您使用的是相对路径引用您的脚本。

例如，当在http://localhost:3000/feature上浏览器将脚本解析为http://localhost:3000/feature/dist/main-631cea2c7e308b1dfb26.min.js这当然不存在，因此express.static中间件正在让请求落入下一个中间件。

因此，您需要将其定义为root relative路径，例如，

<script src="/dist/main-631cea2c7e308b1dfb26.min.js"></script>

来源

2017-01-11 22:31:28 riscarrott

@Alan Thomas - 另外你可能应该避免使用'express_static'提供'__dirname'，否则服务器代码和webpack配置将可以从浏览器访问 - 你可能会更好的服务'path.join（__ dirname，' dist'）'，并将你的脚本引用改为'/ main-631cea2c7e308b1dfb26.min.js'。 – riscarrott

相对路径是问题。如果您使用的是webpack，则可以使用HtmlWebpackPlugin将块脚本标记插入到html文件中。这将设置默认 '插件显式路径：[ 新HtmlWebpackPlugin（{ 模板： '意见/ index.html的'，注入： '身体'，文件名：是index.html， }） ]' – bsyk

@riscarrott使用相对路径引用脚本似乎可以工作。我已经做了一个基本的应用程序来测试这个。 https://react-express-alanqthomas.c9users.io/。来源：https：//ide.c9.io/alanqthomas/react-express。这是使用相对路径并按预期工作。 –

在Express服务器上使用react-router

回答

相关问题