无法获取用户 ID 路由参数以在反应路由器中继上工作

Can't get userID route parameter to work on react-router-relay

本文关键字:路由器 工作 获取 用户 ID 参数 路由      更新时间:2023-09-26

我正在尝试使用 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 的位置。我正在使用来自反应路由器的浏览器历史记录。"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)
      }
    })
  });

我尝试按照反应路由器中继 Github 页面上的示例代码进行操作,但出现控制台错误:

警告:[反应路由器]位置"/地图"与任何路由都不匹配

感谢您提供的任何建议。

您的代码中有某种错误,使其尝试导航到 /Maps ,您没有为此设置路由。仔细检查您如何进行过渡。

我正在将userID添加到MapsSubApp组件中的路由中,但是在路由器转到Maps/userID之前,我应该在早期的HomeSubApp组件中执行此操作。