Nested Routes in react-router-relay

Question

I'm running into some trouble with react-router-relay and nested routes.

I have a router setup like the following:

<Route path='/' component={App}>

    <IndexRoute component={EventList}/>

    <Route path="/events/:eventId" component={EventLayout} queries={eventQueries}>

        <IndexRoute component={EventDetails} queries={eventQueries}/>

        <Route path="details" component={EventDetails} queries={eventQueries}/>
        <Route path="sessions" component={Sessions} queries={eventQueries} >
            <Route path=":sessionId" component={SessionEditor} queries={eventQueries}/>
        </Route>

    </Route>

    <Route path="*" component={require('../components/NotFound.jsx')}/>

</Route>

route code here

when I get to /events/:eventId/sessions/:sessionId, my component is not being rendered at all.

I can see the graphql fragment for that component being returned from the server, but I have no component rendered.

I've posted some code here . If anyone could take a look, I'd be eternally grateful.

I'm getting a bit farther. I figured out that I have to actually render the children somewhere! LOL But, when I render them, I get a graphql error allsFromGraphQL(): Expected a declared value for variable, $sessionId.. I can see sessionId in params, it's not being assigned to props. — Chris Martin
The solution was to use a generic node query instead of a nested resource query. I'm not a huge fan of this. I don't care for the ugly globalId in my url. — Chris Martin

Chris Martin Chris Martin · Accepted Answer · 2015-10-30T09:09:20

The answer ended up being very simple. I don't need a node query. I needed to declare my sessionId variable in initialVariables.

The code will remain if anyone else needs an example.

Nested Routes in react-router-relay

1 Answers