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.

Answer 1

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.