无法获取用户 ID 路由参数以在 react-router-relay 上工作

Posted 2023-03-08

【中文标题】无法获取用户 ID 路由参数以在 react-router-relay 上工作

【英文标题】：Can't get userID route parameter to work on react-router-relay

【发布时间】：2016-07-09 19:52:44

【问题描述】：

我正在尝试使用 react-relay-router 学习 React Relay 和 GraphQL，但无法在我的工作路线中获取参数。我的困难在于“/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)
      
    `
  ;

这是我在路由参数中插入用户 ID 的反应组件中的位置。我正在使用 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”不匹配任何路线

感谢您提供的任何建议。

【参考方案1】：

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

【参考方案2】：

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