问题标签 [react-router]

我正在使用带有 react-router 和 Reflux 的 React 作为我的数据存储，但我不确定如何最好地处理持久性以允许页面刷新。

我的组件使用 Reflux.connect 连接到存储，但由于存储从后端获取数据，因此在组件首次初始化和渲染时它还不可用。

当用户从一开始就进入我的应用程序时，所有这些数据都会按顺序加载并在需要时可用，但如果进一步向下触发页面刷新，react 会尝试渲染依赖于非数据的组件还在那里。

我通过不断地在 LocalStorage 中保存数据副本并从 Reflux 存储 getInitialState() 提供数据来解决这个问题，以便所有组件在渲染之前获取数据。

我想知道这是否是正确的方法。当由于某种原因本地存储数据被清除或损坏时，界面变为空白，因为组件无法访问正确的数据。子结构和属性不存在并触发 javascript 错误。这似乎是一个混乱且不可靠的解决方案。

我很想知道用什么模式来解决这个问题。

------ 编辑 ----- 回答 WiredPrairie 的评论：

1) 为什么要用 getInitialState 中的数据初始化组件？

当我的组件使用 Reflux.connect 时，它们在第一次渲染时还没有处于其状态的数据，因为存储仍然需要获取其数据。我的观点目前不能很好地处理未定义的数据。通过在 getInitialState() 中从 Reflux 存储返回本地存储的缓存，所有连接的组件都将在第一次渲染调用之前获取该数据。

2) 导致页面刷新的原因是什么，为什么不能以与第一次相同的方式加载数据？

这主要是我必须围绕 livereload 构建的一种解决方法，当我进行编辑时刷新页面（稍后会考虑使用 react-hotloader 但还不是一个选项），但用户也可以在我的嵌套视图中的某个地方点击刷新那将具有相同的效果。当他们手动刷新时，他们并没有在开始时进入应用程序。

3）当组件连接到商店的更改事件时，为什么它们不更新呢？

他们确实更新了，但就像我说的那样，他们现在不处理空数据，在第一次渲染时他们会错过它，等待商店获取东西。我可以使用空数据使我的所有视图优雅地工作，但这会增加很多样板代码。

从到目前为止的回复中，我感觉我正在使用 localStorage 做的是常用的方法。在 localStorage 或 sessionStorage 或类似的东西中本地缓存内容，并在刷新后立即提供该数据。

我应该通过在 localStorage 无法正常工作的奇怪情况下优雅地处理空数据来使我的观点更加稳健。

使用 React Router，将新条目推送到历史记录以更新 URL 但不触发新路由的最佳方式是什么？

Navigation.replaceWith()mixin 方法似乎与我需要的相反。

我一直在思考，我对客户端和服务器之间的路由感到困惑。假设我在将请求发送回 Web 浏览器之前使用 ReactJS 进行服务器端渲染，并使用 react-router 作为客户端路由在页面之间切换而不刷新为 SPA。

想到的是：

• 路线是如何解释的？例如，从主页 ( /home) 到帖子页面 ( /posts)的请求
• 路由在哪里，在服务器端还是客户端？
• 它怎么知道它是如何处理的？

我目前在使用 react / react-router 进行服务器端渲染时遇到了一个奇怪的问题，我根本无法弄清楚。我正在使用 ES6 和 Babel (6to5) 进行转译

Server.js 片段

路由.js

输出

CONTENT 正确输出我渲染的组件

CONTENT2 输出<noscript></noscript>

出于某种原因，当我从外部文件导入路由时（因此我可以在客户端和服务器代码中都需要它们）我的服务器端渲染无法输出正确的 HTML

从React todomvc 1中可以看出，确保 ui 与模型保持同步的一种方法是让模型订阅 render 函数（如下所示），以便 UI 在每次更改时呈现。

如果在应用程序中使用 React 路由器，则必须将 React.render 调用包装在路由器中，如本演示所示

那么，如果您还需要更新模型，您将如何使用路由器？即如何包装React.render在路由器和function render？这会产生范围问题

I am trying to build a parallax website with react and react-router

In most react-router examples I found, target dom node is replaced with Handler corresponding to the route.

How can I render all the route handlers into single page and jump to specific location in a page with react-router ?

尝试在我的本地机器上运行任何（和所有）React-Router 示例https://github.com/rackt/react-router/tree/master/examples而仅将 ES6 语法更改为 ES5 我不断收到相同的错误来自同一行代码

代码

错误

除了使用 ES6 声明依赖项和解构路由器之外，我没有更改示例的任何内容

我在我的索引中包含了指向 js 文件的链接，并为路由器做了这个

这是粘贴在这里的 ES5 版本代码的 jsfiddle从 github

这是我试图开始工作的 ES5/6 更改的完整代码

I've been in react for a few months. Love it. Just picked up react-router today. It seems awesome and straightforward, but my routes just aren't connecting.

I'm building a single page app with a header that has three universal react components and a container for the main content. What's happening is that the routes are simply never hitting. I put a notfoundroute in there just to confirm and catch the misses. I always end up on the NotFoundRoute. Can anyone point out anything obvious I'm missing? My f/:formName route has querystring params, but my dashboard one doesn't, do I don't think that factors in, but... FYI.

我正在尝试将一些参数从 React Router 传递给我的组件，但由于某种原因，一旦组件被渲染，这些参数就不再存在。

这是我的代码：

路由器：

帖子组件：

当我访问 route#/post/post-1时，后渲染方法会打印一个空对象。我已经检查并确保回调中的options变量具有属性。Router.run

任何帮助将不胜感激。

我想这样做，以便当 AJAX 请求以未经授权的响应返回时，用户被发送到未经授权的页面，如下所示：

我知道您可以使用Navigationmixin（尽管它很快就会被删除）但是您如何使它成为一个全局错误处理程序，而不是绑定到特定组件？