使用react-router和browserHistory进行React所需的最低nodejs服务器设置

2023-12-26

我当前的 server.js:

let express = require('express');
let harp = require('harp');
let path = require('path');

let app = express();

app.use(express.static(__dirname + "/dist"));
app.use(harp.mount(__dirname + "/dist"));

let port = process.env.PORT || 3333;
app.listen(port, () => console.log("Listening on port " + port) );

// ... other routes for data fetching ...

// For browserHistory: https://github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/Histories.md
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

当我开始导航时,这工作正常mysite.com/。但是,如果我输入mySite.com/someRoute,它破裂了。具体来说,我在控制台中看到以下内容:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3333/dashboards/styles/normalize-3.0.3.min.css".
...
Uncaught SyntaxError: Unexpected token <
...

我的理解是,要解决这个问题,我还需要实现服务器端渲染。准确吗?如果是这样,所需的最低设置是什么?我见过的所有指南都比我现在想要的要深入得多。

(如果有帮助的话,我可以升级依赖项。) 反应:0.14.7 反应路由器:1.0.3


假设您的 css 文件位于静态文件夹中,并且该文件的路径与以下路径匹配__dirname + "/dist"你是NOT导航至/someRoute在您的应用程序中,但通过地址栏将浏览器定向到该地址,我怀疑问题是当您需要提供 css 文件时,您正在提供index.html。 (您向我们提供了浏览器报告的错误,但不是服务器对该请求的实际响应。)

这是由于将浏览器定向到mySite.com/someRoute。浏览器现在认为/someRoute是使用相对 url 时所有请求的根路径。所以如果index.html页面需要assets/css/mysite.css。浏览器实际上会发送一个请求someRoute/assets/css/mysite.css。您可以通过查看浏览器中的网络选项卡来验证这一点。

要解决此问题,请设置base tag to /在你的<head>。这将告诉浏览器不要在相对 URL 上添加任何路径前缀。

Example:

<head>
  <base href="/">
  <link >
</head>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用react-router和browserHistory进行React所需的最低nodejs服务器设置 的相关文章

  • 在 React 组件中动态创建元素

    我创建了一个辅助函数 当我单击按钮时 它可以在组件中动态创建元素 但是它没有显示我尝试附加到父 div 的 html 的一半 它正确地将标签添加为 html 但其余部分只是纯文本 谁能明白为什么吗 用于动态创建内容的函数 function
  • React Material ui 表无法从行获取元素

    我想使用材料 ui 库中的表进行反应 http www material ui com components table http www material ui com components table 我显示它 它工作得很好 我试图获取
  • 窗口缩放:网站大小问题和 html 初始缩放值被忽略

    在 Windows 10 上 缩放默认设置为 125 会导致网站大小调整问题 因此我在 Ubuntu 上复制了增加缩放的问题 我试图修复大小改变initial scale以这种方式值 document querySelector meta
  • 生成随机数背后的数学(崩溃游戏 BTC Casino)

    我正在开发一款基于网络的游戏 其中有多个迷你游戏 我们坚持还添加一个在赌博界非常流行的崩溃游戏 然而 我们一直在努力理解生成随机 几乎不可预测 数字的概念 大多数赌博网站都会提供哈希值等来证明数字未被篡改 我们真的不需要这个 因为我们的游戏
  • Mongoose 多个连接

    目前我的连接有这个代码猫鼬 js var mongoose require mongoose var uriUtil require mongodb uri var mongodbUri mongodb localhost db name
  • 亚马逊 API 安全与 API 密钥?

    我已经在亚马逊 API 网关上部署了我的 REST API 并且我面前有一个存在安全问题的场景 我正在为所有 api 请求使用 api 密钥 我想知道该 api 密钥是否以某种方式公开 并且我们知道已发布的应用程序正在使用相同的 api 密
  • 使用 ReactJS 突出显示文本

    我试图突出显示与查询匹配的文本 但我不知道如何让标签显示为 HTML 而不是文本 var Component React createClass highlightQuery function name query var regex ne
  • mime.lookup 的 webrtc 错误

    我在我的电脑上尝试了 webrtc 演示 但在演示步骤 04 中 当我使用 npm install 和 node index js 时 它显示 类型错误 mime lookup 不是一个函数 即使我通过输入 npm install mime
  • 如何从其他组件更新状态?

    我正在使用本机反应和反应导航进行路由 如何从另一个组件 页面更新状态 主屏幕 export class HomeScreen extends Component constructor this state test updateState
  • React:使用索引作为列表中项目的键

    使用索引作为列表中项目的键有哪些陷阱 在添加或删除列表中的元素时 React 更改检测或任何意外的列表更新是否存在任何性能缺陷 我已经阅读了几篇有关此的文章 但仍然没有弄清楚 请参考codepen http shorturl at grBM
  • 如何使用 Python 验证 ReCaptcha 响应服务器端?

    我想检查使用生成的客户端响应react google recaptcha在我的注册表单中 不幸的是 我不知道如何使用 Python 在服务器端验证它 I tried recaptcha client https pypi python or
  • 如何停止中间件链?

    如果出现错误 如何正确结束中间件链 在我的代码中我有 if someProblem res status statuscode json message oops return 然而之后链中的中间件不断被调用 给我Can t set hea
  • 使用 Django 管理界面的 Node.js 应用程序

    我想使用 node js 构建一个新应用程序 但它需要相当多的后端管理 而我宁愿不必构建 我在 django 中有一些现有代码 并且非常喜欢用于处理后端管理的内置管理界面 我是否可以使用 nginx 之类的东西将所有流量定向到我的 node
  • React - 澄清语法混乱

    感谢您帮助我摆脱困境 我对 REACT 很陌生 显然对一些基本概念很困惑 感谢您的帮助 这是我的 app js import React from react import TodoItem from components TodoItem
  • 使用 Nodemon 在 Node.js v6.2.0 上安装 Babel V6.x ES7 Async/Await

    伙计 设置起来很痛苦 我已按照此处的安装说明进行操作 单击 nodemon 框 https babeljs io docs setup installation https babeljs io docs setup installatio
  • fetch API 不通过 post 发送数据

    我在使用 Fetch API 通过 post 发送数据时遇到问题 服务器只收到一个空的 JSON 有人能帮我吗 基本上 我正在更新状态数据并将其发送到 API 提交的数据 请求 submitedData async event gt eve
  • React-i18next 出现错误尝试导入错误

    我尝试使用https react i18next com https react i18next com 对于本地化 我收到错误 尝试导入错误 initReactI18next 未从 react i18next 导出 这是我的 i18n j
  • 单击

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我知道如何用 jquery 做到这一点 但我被 React 困住了 每当用户点击 div 时 我如何聚焦输入字段 你需要有一个onCl
  • React.js - 使用自定义路径运行 npm run build

    Running npm run build命令开启create react app项目在所有文件中创建一个构建文件夹和一些默认路径 例如在地图文件中 version 3 sources static js main 500cb0d9 js
  • 如何在node.js解析查询中设置dns服务器?

    我正在尝试设置 Google DNS 服务器8 8 8 8在 Node js 中解析查询 这样做的正确方法是什么 在命令行中通常我们可以执行以下操作 nslookup stackoverflow com 8 8 8 8 Server 8 8

随机推荐