问题标签 [isomorphic-javascript]

我基于这个 repo中的入门套件松散地构建了一个同构 React 应用程序。它使用 webpack 来构建生产代码。

问题是，我需要将服务器上的一些环境变量的值暴露给浏览器中的客户端代码，而不需要重新构建生产代码。我希望能够更改环境变量的值，并使其在客户端刷新下一页时产生效果，而无需重建任何内容。而且我不想为了做到这一点而使测试复杂化。

我找到了一些解决方案，但都不是很好：

1. 使用 webpack 的 DefinePlugin 将某些环境变量的值硬编码到生产代码中。类似于此处概述的内容
2. 构建一个 API 只是为了将环境变量拉入客户端。
3. 在 webpack 系统之外编写一个特殊的 .js 文件。该文件将被模板化，以便在提供给客户端之前对其进行修改。可能需要将环境变量值存储在“窗口”或其他东西上的特殊全局变量中。

这些方法的问题：

1. 被拒绝。这只是不符合我的要求。如果我更改了 env 变量的值，我需要重新构建代码。
2. 不必要的复杂。我不需要这个 API 来做其他事情。一个完整的 API 只是为了提供 2 或 3 个很少更改的值？需要复杂性以确保在加载时尽快从 API 中提取值。
3. 最接近，但有点恶心。如果可以避免的话，我真的不想离开 webpack/React/Flux 系统。在窗口对象上创建特殊的全局变量是可行的，但会增加测试使用这些全局变量的组件/存储/操作的复杂性。

过去我已经完成了 2 和 3，并且从未对这些解决方案真正感到满意。

有什么建议么？似乎这应该是一个常见/已解决的问题。也许我只是想多了，3是要走的路。

我在我的同构反应项目中使用反应路由器，我有一个工作路由器，但我想知道如何翻译 url 并使用相同的处理程序。

例如 ：

/en/user => 处理程序是 userComponent

/fr/utilisateur => 处理程序是 userComponent

我阅读了很多文档，我发现的唯一解决方案是制作三个路线块，但我认为它应该存在更好的解决方案。

谢谢 ！

我需要使用 react-router 从服务器端的另一个页面重定向页面。我编写的代码在客户端工作，但不在服务器渲染中。你可以在这里找到代码：

https://github.com/jurgob/iso-login/blob/e26af0152896a949435db62549027b2683276db7/src/shared/components/LoginPage.js

这是/src/shared/components/LoginPage.js内的重定向代码：

笔记：

如果您查看https://github.com/jurgob/iso-login/blob/e26af0152896a949435db62549027b2683276db7/src/shared/routes.js

我做了：

此代码有效，但我想在组件内进行重定向

我正在使用 react-router 来处理 React 中的服务器端渲染和客户端渲染。但作为我的应用程序的入口点也有以下代码：

渲染被调用两次。如何处理这种情况。

我正在关注这个关于如何使用 node.js 实现同构 javascript 应用程序并做出反应的简单教程。服务器端渲染对我来说很清楚，因为它只是将组件渲染为字符串。

但是，我不明白如何附加客户端组件中定义的功能。该教程在main.js文件中包含以下内容：

但这使用了 require 函数，并且像教程一样简单地将脚本包含在 html 中，由于无法使用此 require 函数，因此会出错。

我能找到的所有教程都是关于这些组件的服务器端渲染的，这真的很令人沮丧，但似乎忽略了客户端如何也可以包含反应组件。真的那么明显吗？我错过了一些非常简单的东西吗？

谢谢你的帮助。

我在登录时使用用户登录，并且用户对象被保存为 req.user （或护照用户），但是在我转到不同的路线/状态后，它不再将用户对象保存在那里。为了演示，我只是尝试 console.log(req.user) 并返回未定义的，用于我的控制器中的 POST 方法（updateUserProfile）。我使用 PostMan 来测试 POST 方法，GET 方法在 Postman 上用于抓取所有用户。如果我刷新页面 app.get(*) 将加载 req.user 并打印它，它只是在调用中。可能是什么原因？这可能是我的快速设置吗？例子：

我的路线：

我的用户控制器：

快速设置：

编辑：打印出 req.session 和 req.user 仅在登录和登录/注销时显示，当使用 react-router 转换到另一个视图时，它不再具有该信息。（“尝试使用控制台日志”）

我是通用渲染的新手。我在 express 中有一条通配符路线，应该可以捕捉到任何不以 . 开头的东西/api。

它看起来像这样：

这成功发送到服务器，因为我看到标题包含 ruh:server。

页面加载后，服务器崩溃说指向events.js:82

如果我注释掉ReactDOMServer.renderToString并删除 html 中的引用，服务器会加载并且不会崩溃。

如果我运行ReactDOMServer.renderToString并且甚至不引用它，服务器仍然在加载时崩溃。注释掉将允许服务器存活。

这是我的 webpack 配置：

如果我注释掉该行const componentHTML等，服务器将运行，但它不会普遍呈现。如果有人感兴趣，我可以尝试复制这个问题

我试图理解kirasoft的 react-starter-kit并注意到他们的路由有两个用于“*”通配符路由的条目。为什么有两个，优先顺序是什么？第一条路线似乎设置了整个应用程序，然后第二条路线似乎触发了默认的内容处理程序......都被触发了，如果是这样，两者之间的逻辑是什么，它们是否都只是按顺序触发并被附加以某种方式一起响应？

我试图在传递给客户端之前在服务器上呈现一个非常简单的组件，使用 gulp 和 babelify 进行转换，如下所示：

该组件在客户端上运行良好：

但是，当我使用 Express 需要 Node.js 中的文件时，服务器会因意外令牌而崩溃

当我使用/** @jsx React.DOM */在组件文件顶部使用的旧方法时，没有任何问题。

路线：

我哪里错了？

我正在尝试在服务器上渲染一个非常简单的 React 组件：

当我调用 ReactDOMServer.renderToString (Component) 我得到Error: Invariant Violation: renderToString(): You must pass a valid ReactElement.

如果我改为使用 React.createElement (Title)，我会得到

路由文件：

我不知道为什么这不起作用！