问题标签 [isomorphic-javascript]

从 Node (express) 服务器端渲染时，我无法将初始道具传递给我的 React 组件

这是我的组件的简短版本：

这是服务器端

尝试在 render() 方法中使用它时，似乎locations没有将 prop 传递给组件

任何想法 ？

例如，我使用catberry-l10n插件，我想像这样定义应用程序的语言：

我正在构建一个使用 Express 处理服务器请求的同构 React 应用程序。

在客户端运行捆绑的 React 应用程序时，我的 Firebase 登录流程运行良好：

• 我使用 Firebase 的电子邮件/密码选项登录
• 认证后，ref.getAuth()成功返回用户的auth对象
• ref.getAuth()在浏览我的应用程序客户端（通过 react-router）时的后续调用也会返回一个成功的身份验证对象。

但是，即使在客户端成功登录后，硬刷新（来自服务器）也不会持续存在。在服务器上下文中使用相同的 React 组件，ref.getAuth()返回 null。

我是否错过了以与在客户端上工作相同的方式在服务器上工作的步骤（用例是网站的硬刷新）？

反应通量车。此示例仅包含 react 的客户端代码。如何使其同构。在哪些地方需要更改以包含节点并使其在服务器端也一样运行。

Catberry 对组件有一个要求——它们的所有 ID 都必须是唯一的。

当嵌套组件的层次结构复杂时，构建唯一 ID 的最佳实践是什么？

我正在制作一个同构的反应应用程序，但现在我被困在弄清楚如何使用 react-router 和 webpack 将服务器端逻辑从捆绑到客户端 javascript 中排除。

所以我的 webpack 有一个“client.js”的入口点，它是客户端包 javascript。

“client.js”包含 react-router 路由定义。

对于服务器端，我将 epxress 和路由设置为 * （所有请求都路由到这里）

“服务器.js”

由于客户端和服务器共享相同的路由，如果我想在 react-router 中设置一个路由，例如 /attractions/:id 将包含服务器端逻辑（数据库查询等），它将被 webpack 捆绑到客户端.js

所以我想知道是否有一种方法可以只保留一个由“client.js”和“server.js”共享的routes.js，并且让“client.js”不捆绑一些服务器路由。

我想出了几个可能的解决方案。但想看看最好的方法。

1. 保留两条路由，一条给服务器，一条给客户端，服务器路由是客户端路由的超集。
2. 为 react-router 添加另一层抽象，所以而不是

<Route handler="/attraction/:id"/>

我可以使用 import ABC from "ABCRouteController" 和 ABCRouteController 将确定它是节点还是客户端并生成路由或不生成路由。

3. 将特定路由添加到 server.js。所以而不是

我们添加了更具体的路由来处理纯服务器端逻辑（类似于服务器和客户端的两个单独的 react-router）

我正在 clojure / clojurescript / reagent. 由于我依赖于用于服务器端渲染的 clojurescript 输出 js 文件，我希望在 jar 之前编译该文件。我怎么做？

这是“lein uberjar”的输出，请注意首先编译 jar。我的 clj 文件“nash.clj”需要运行编译后的 server-side.js 构建：

而我的 project.clj ......整个 cljsbuild 事情目前对我来说是个谜。

我最近在一个带有react-router的同构应用程序中使用 Flux Architecture来处理我的应用程序的路由。我的问题是当路由改变时如何从外部 API 加载数据？

例子：

• http://myapp.com/#/search/:param1/:param2 => 显示 ResultComponent（在 ResultComponent 中加载数据并设置状态）
• http://myapp.com/#/detail/:id => 显示 DetailComponent（加载数据并在 DetailComponent 中设置状态）

据我了解，数据必须在 Action 中加载。但是我还没有找到一个简洁的例子。

我正在使用 ES6。

我将 react-router 用于服务器和客户端路由，以尝试制作同构应用程序。服务器路由工作正常，我可以正常检索数据，但是，在客户端上，我单击的第一个链接会调用 react-router 在 url 更改时的回调。由于某种原因，后续点击不会触发回调。

我正在我的服务器中运行反应路由器的主要运行方法。

在客户端我正在运行以下

在我的 client.js 中，react router run 的回调只调用一次，这对我来说很奇怪。没有可见的错误。有人有什么想法吗？

我希望我的基于 React 的 SPA 在服务器端呈现（现在不是）。因此，我想将 React 与react-router、redux和一些构建层（如isomorphic starterkit ）结合起来。

有hapi 通用 redux将所有内容连接在一起，但我正在为如何组织我的流程而苦苦挣扎。我的数据来自 REST API 的多个端点。不同的组件有不同的数据需求，应该在客户端及时加载数据。相反，在服务器上，必须获取特定路由（组件集）的所有数据，并将必要的组件呈现为字符串。

SOME_DATA_ARRIVED在我的第一种方法中，我使用 redux 的中间件来创建异步操作，它加载数据、返回一个承诺，并在承诺解决时触发一个操作。Reducers 然后更新我的商店，重新渲染组件，一切都很好。原则上，这是可行的。但后来我意识到，在路由开始发挥作用的那一刻，流程变得很尴尬。

列出许多数据记录的某些组件具有多个链接来过滤记录。每个过滤后的数据集都应该可以通过它自己的 URL 访问，例如/filter-by/:filter. 所以我使用不同<Link to={...}>的组件来改变点击时的 URL 并触发路由器。然后路由器应该根据当前 URL 表示的状态更新存储，这反过来会导致相关组件的重新呈现。

这并不容易实现。我componentWillUpdate首先尝试触发一个操作，该操作异步加载我的数据、填充存储并导致我的组件的另一个重新渲染周期。但这在服务器上不起作用，因为只支持 3 种生命周期方法。

所以我正在寻找组织这个的正确方法。从用户角度更改应用程序状态的用户交互应更新 URL。IMO 这应该使路由器以某种方式加载必要的数据，更新存储，并启动协调过程。

所以interaction -> URL change -> data fetching -> store update -> re-render。

这种方法也应该在服务器上工作，因为从请求的 URL 中应该能够确定要加载的数据，生成initial state并将该状态传递给storeredux 的生成。但我没有找到一种方法来正确地做到这一点。所以对我来说，出现了以下问题：

1. 我的方法是错误的，因为有些东西我还不明白/不知道吗？
2. 在 redux 中保持从 REST API 加载的数据是否正确store？
3. state让组件保留在 redux 中并由store其他人自己管理是不是有点尴尬state？
4. 有这个想法是interaction -> URL change -> data fetching -> store update -> re-render错误的吗？

我愿意接受各种建议。