Question

我正在尝试使用react-relay-router学习React Relay和GraphQL但是在我的路由中无法获得params工作。我的难点在于“/ Maps /：userID”路径。

这是我的路由器：

ReactDOM.render(
    <RelayRouter history={browserHistory}>
      <Route path="/"
        component={HomeSubAppContainer}
        renderLoading={() => <Spinner/>}
      >
        <IndexRoute component={WelcomePageContainer}/>
      </Route>
      <Route path="/Maps/:userID"
        component={MapsSubAppContainer}
        renderLoading={() => <Spinner/>}
        queries={userRootQuery}
      >
        <IndexRoute
          component={WeekMapContainer}
          renderLoading={() => <Spinner/>}
        />
      </Route>
    </RelayRouter>,
    document.getElementById('root')
  );

这是我的中继容器和根查询：

 export const MapsSubAppContainer = Relay.createContainer(MapsSubApp, {
    fragments: {
      user: () => Relay.QL
      ` fragment on User {
          birthDate
        }
      `
    }
  });

  export const userRootQuery = {
    user: () => Relay.QL
    ` query {
        user(userID: $userID)
      }
    `
  };

这是我的react组件中的位置，我在route参数中插入了userID。我正在使用来自react-router的browserHistory。 “1”是我的测试用户ID。

handleSubAppsNavClick(button) {
  const path = button === 'Maps' ? '/Maps/1' : '/' + button;
  browserHistory.push(path);
}

这是我的架构的根查询：

var queryType = new GraphQLObjectType({
    name: 'Query',
    fields: () => ({
      node: nodeField,
      user: {
        type: userType,
        args: {
          userID: {type: GraphQLString}
        },
        resolve: (args) => getUser(args.userID)
      }
    })
  });

我试着按照react-router-relay Github页面上的示例代码，但是我收到了一个控制台错误：

警告：[react-router]位置“/ Maps”与任何路线都不匹配

感谢您提供的任何建议。

Answer 1

您的代码中存在某种错误，导致它尝试导航到/Maps，而您没有设置路线。仔细检查您是如何进行转换的。

Answer 2

我在我的MapsSubApp组件中添加了userID到路由，但我应该在路由器转到Maps / userID之前在早期的HomeSubApp组件中完成此操作。

无法获取userID路由参数来处理react-router-relay

2 个答案: