React router configuration for an SPA with fixed layout

This is my first post here, hope I'm covering everything and did a search for various topics, watched some vids, read the react router docs before getting stuck. :-(

I'm working on a single page app, which has the following components:

Layout - parent component, has two children:

Maps - child component

Events - child component, has one child component:

EventDetails

Trying to configure react router to keep the Layout component on the page at all times, and render Maps and Events. Inside Events, when clicking on a link with an event_id (got the link working), it should display into EventDetails. I can't figure out how to get the EventDetails component to display into Events, with the Layout still displaying.

With these routes react-router will automatically pass the Maps component as children prop in the Layout component when you are on /maps path or the Event component when you are on /event. The same thing happens for nested components/routes. Your job is to use {this.props.children} in render method of Root component and children components which want to display other nested components.