您如何从普通中继转移到带路由器的中继？

Question

我有一个正在运行的 React/Relay 应用程序，我想使用 react-router-relay 添加路由。当我尝试最小可能的转换时，请参阅下面的代码，我在日志中收到一个无法理解的错误："Uncaught Error: Invariant Violation: RelayQueryNode: Invalid concrete node."

import 'babel/polyfill';
import TodoApp from './components/TodoApp';

import { Router, Route } from 'react-router';

import ReactRouterRelay from 'react-router-relay';
import TodoAppHomeRoute from './routes/TodoAppHomeRoute';

/*

This section works perfectly

ReactDOM.render(
  <Relay.RootContainer Component={TodoApp} route={new TodoAppHomeRoute()} />,
  document.getElementById('root')
);
*/


//This breaks every time.
ReactDOM.render(
  <Router
    createElement={ReactRouterRelay.createElement}>
    <Route
      path="/"
      component={TodoApp}
      queries={new TodoAppHomeRoute().queries} // and the query
      />
  </Router>,
  document.getElementById('root')
);

表达这个问题的另一种可能方式是：指定普通中继的 RelayRoutes.queries 和 react-router-relay 的路由查询的适当方式之间有什么区别？

Answer 1

我猜 new TodoAppHomeRoute().queries 是违规者。我的预感是它可能是静态的属性。试试这个 TodoAppHomeRoute.queries.

如果还是不行，让我们看看TodoAppHomeRoute

中的代码

Answer 2

如果 Chris 的回答无效，@cpojer 在这里写了一篇关于路由和中继的非常棒的帖子：https://medium.com/@cpojer/relay-and-routing-36b5439bad9

Answer 3

其他几个人报告了这个问题 here。

看起来像在您的组件中为 Relay 和 React 中的每一个添加显式 import 可能会修复它（我看到了这个刚刚它为我修好了）：

import React from 'react';
import Relay from 'react-relay';

或者失败，npm install --save react react-relay graphql graphql-relay react-dom 更新您的依赖项。

您如何从普通中继转移到带路由器的中继？

How do you move from stock Relay to Relay with a router?

javascript

reactjs

relayjs

react-router-relay