问题标签 [react-router-relay]

我有一个包含以下内容react-router和react-router-relay设置的网站：

主.jsx：

该站点是一个虚拟教室，教师可以在其中为学生创建任务。这些任务也可以编辑。

当用户在其中编辑任务TaskEdit并点击保存时，将应用更改并将用户重定向到TaskList. 现在，我想在编辑任务后给用户一个“您的更改已保存！ ”消息。

为此，我创建了一个引导警报组件 ( )。<Alert>

出于说明目的，假设我有以下mainView组件（检查上面的路由器）：

主视图.js：

通常，我会在活动组件之外创建此警报组件，然后将某种将警报显示为道具的函数传递给活动组件。类似于此处显示的内容。

但是，这仅适用于特定组件。但是因为<Alert>位于我页面的根级别（以及菜单栏、侧边栏和所有页面上的其他静态内容），我不能将其作为道具传递，因为{this.props.children}.

请允许我再次说明我想要实现的流程：

1. 用户将对任务的编辑保存在<TaskEdit>.
2. 编辑被保存，用户返回到<TaskList>.
3. 紧接着，我想<Alert>触发并显示一条消息。

我见过其他解决方案，建议您可以克隆 React 元素的所有子元素并应用alert打开react-router.

我怎样才能完成上述工作？有没有办法让组件可以全局访问？请注意，我不想<Alert>在每个组件中重新创建。整个 DOM只有一个这样的组件。

我正在尝试实现登录突变。突变验证提供的 id_token 并通过会话登录用户。突变本身有效（使用 GraphiQL 验证），但我在将其与 Relay 集成时遇到了问题。

当用户登录时，整个 Relay 存储可能会被更改，因为“查看器”是根查询。但我不想在胖查询中列出我的整个查询树。能够以某种方式清除整个商店会很好，但我看不到使用react-router-relay.

中继突变：

用法：

GraphQL 架构：

我的部分路线是这样设置的：

但是，我收到以下错误：

路由查询是否:widgetId有效？如果我从顶级路由中删除查看器，一切正常。

编辑：这是详细信息片段：

编辑：这里是小部件片段：

注意：我使用的是同构中继路由器

我启动 npm 但看到错误，我不知道修复。请帮我

错误：

错误：
npm 错误！Windows_NT 10.0.10586 npm 错误！argv "D:\nodejs\node.exe" "C:\Users\phamv\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "start:tunnel" npm ERR! 节点 v4.4.5 npm 错误！npm v3.9.6 npm 错误！代码 ELIFECYCLE npm 错误！pickhub@0.3.0 start:tunnel: cross-env NODE_ENV=development node internals/server npm ERR！退出状态 1 npm ERR！npm 错误！在pickhub@0.3.0 start:tunnel 脚本'cross-env NODE_ENV=development node internals/server'处失败。npm 错误！确保您安装了最新版本的 node.js 和 npm。npm 错误！如果你这样做了，这很可能是pickhub包的问题， npm 错误！不是 npm 本身。npm 错误！告诉作者这在您的系统上失败：npm ERR！cross-env NODE_ENV=开发节点内部/服务器 npm 错误！您可以通过以下方式获取有关如何为此项目打开问题的信息：npm ERR！npm 错误 Pickhub npm 错误！或者，如果这不可用，您可以通过以下方式获取他们的信息：npm ERR！npm 所有者 ls Pickhub npm ERR！上面可能有额外的日志输出。

我使用react-router-relay包有以下路由器和路由

我来自 GraphQL 的 StoreType 如下所示，用户字段接受一个表示非空整数的 id 参数：

user/:userId我的路线中继容器：

当我在浏览器中访问 /user/1 时，react-router-relay 将路由:userId视为字符串而不是整数，GraphQL 返回 JSON 编码的错误消息"Argument \"id\" has invalid value \"1\".\nExpected type \"Int\", found \"1\"."

有没有办法将 URL 中传递的 userId 参数转换为整数？或者是否有支持格式良好的数字字符串和整数的自定义 GraphQL 标量类型？对此的任何意见或方向表示赞赏。

我在一个项目中使用react-router-relay 。考虑到每个组件基本上都以一个与根查询同名的片段结束，这个设计对我来说似乎很不合适。每个组件不应该能够在根查询下拥有任意类型的唯一命名片段吗？这可能使用这个包还是我的想法有缺陷？

编辑：也许我的问题有点含糊。我的问题是，react-router-relay 定义的查询属性基本上有两条规则，它们强制执行在我看来是一种奇怪的设计模式。这两条规则是：

1. 每个查询只能深入“一层”。
2. 每个查询必须映射到使用它的组件上具有相同名称的片段。

这给您留下了一个场景，您可以：

1. 对每个组件使用相同的“查看器”查询，并在每个组件上定义一个免费的“查看器”片段。尽管名称相同，但这些片段都会定义不同的数据需求，这看起来很混乱。
2. 您为不同的组件创建唯一的片段名称，然后根据您要获取的数据类型使用不同的名称重复相同的确切根查询，这看起来非常愚蠢。

这似乎是一个基本的想法，但我似乎无法理解它。

在 Redux 中，定义 store 发生什么以及传递给组件的 props 完全取决于我。在 Relay 中，我可以render在我的容器中定义一个函数，在其中我根据就绪状态返回一个组件。我真正想要的看起来更像是：

然后在任何组件中：

..但我当然不会混合使用 redux 和中继，我想有一种“中继方式”可以做到这一点。

在我的 nodejs 应用程序中

这是我的 schema.js 文件

下面是我的 database.js

我让用户通过

我想与用户一起获取所有帖子

但我在终端中遇到错误

请帮忙。提前致谢。

自从升级 React 和 Babel 后，我的一个文件中出现了这个错误。这显然是一个幻像错误，因为之前一切正常，而且这个文件根本没有改变。有谁知道这里发生了什么以及我该如何解决？

错误

未捕获的错误：中继转换错误Syntax Error FileXYZ - Unexpected character "\u2028".

9：用户ID

10：用户名^

在文件 XYZ 中。如果最近添加了参数/字段/类型，请尝试更新您的 GraphQL 架构。

我之前的package.json是这样的：

现在是这样的：

到目前为止，我还无法更新 react-router 和 relay，因为它引入了许多重大更改，我无法完全解决这些更改，我在另一个问题中询问这个问题。

对此问题的任何帮助将不胜感激。谢谢！

我正在尝试在我的应用程序中将 react-router 更新到 v2.6 并将 react-router-relay 更新到 v0.7，但我正在努力遵循更改日志来解决所有重大更改。我想我解决了所有的变化，但我仍然无法让它发挥作用。

警告：[react-router] 位置“/”不匹配任何路由

这是我为解决这些更改所做的分步指南。首先我更新了 npm 模块。

我以前的 package.json 一切正常：

我的新 package.json 出现错误：

我删除了历史模块，因为它现在是 react-router 的直接依赖项。安装最新模块后，我重新加载了页面并收到以下错误：

错误一：

警告：[react-router] 看来您已向 提供了一个已弃用的历史对象<Router/>，请使用 React Router 提供的历史记录import { browserHistory } from 'react-router'或import { hashHistory } from 'react-router'。如果您正在使用自定义历史记录，请使用创建它，有关详细信息useRouterHistory，请参阅https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-history-with-router .

错误2：

警告：上下文类型失败：relay提供给 的道具/上下文无效Relay(App)，应undefined为符合RelayEnvironment接口的对象。

错误 3：

警告：上下文类型失败：route未在 中指定所需的上下文Relay(App)。

错误 4：

Uncaught Invariant Violation: RelayContainer:Relay(App)使用无效的 Relay context 渲染undefined。确保relayReact 上下文中的属性符合RelayEnvironment接口。

第一个错误提供了一个方便的链接到 react-router 的升级指南，所以我按照它并相应地更新了我的 app.js 文件。

在我进行更改之前，它看起来是这样的：

尝试 1

使用 2.x 的更新指南，我将 app.js 文件更改为使用如下自定义历史记录：

然后，这在浏览器中给了我以下错误：

错误 5

警告：[react-router] 位置“/”不匹配任何路由

我相信这就是我想要的解决方案。但是我不确定，所以我也尝试了浏览器（HTML5 pushState）历史方式并尝试了以下更改：

尝试 2

加载此内容时，我得到错误 2、3 和 4。我认为尝试 1 是正确的方法，但我不知道这个错误意味着什么，用谷歌搜索它，给了我很多答案（1、2，它把我链接到3甚至4与 IndexRoute），我尝试过，但没有一个答案有效。

我的 App.js 文件如下所示，仅供参考：

我不是 100% 确定这是否是原因，但我知道react-router v2.0.0-rc6发生了重大变化，顶级路由器导出被删除，但我真的不知道这对我意味着什么？难道我不能再使用路由器了吗？如果是这样，我应该怎么做？

经过几天的研究和反复试验，我放弃了，希望这里有人能提供帮助。任何指向正确方向的指针将不胜感激。