CODEWITHSUNDEEP
javascriptreactjsreact-routerrelayreact-router-relay
David Ewers
David Ewers

Reputation: 31

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

I'm trying to learn React Relay and GraphQL using react-relay-router but can't get params in my routes to work. My difficulty is at the "/Maps/:userID" route.

Here's my router:

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')
  );

Here's my Relay container and root query:

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

  export const userRootQuery = {
    user: () => Relay.QL
    ` query {
        user(userID: $userID)
      }
    `
  };

Here's the place in my react component where I insert the userID in the route parameter. I'm using browserHistory from react-router. "1" is my test userID. 

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

Here's my schema's root query:

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

I tried to follow the example code on the react-router-relay Github page, but I'm getting a console error:

Warning: [react-router] Location "/Maps" did not match any routes

Thanks for any suggestions you can offer.

Upvotes: 1

Views: 859

Answers (2)

David Ewers
David Ewers

Reputation: 31

I was adding the userID to the route in my MapsSubApp component, but I should have done this in the earlier HomeSubApp component before the router goes to Maps/userID.

Upvotes: 0

taion
taion

Reputation: 2837

You have some sort of bug in your code that's making it attempt to navigate to /Maps, for which you don't have a route set up. Double-check how you're making the transition.

Upvotes: 1

Related Questions