TLDR:
I'm making a simple 2 page app, that accesses the state object from both pages and wondering how to structure my react router (and its too late to move onto redux at this stage :P).

[Codepen is here](http://codepen.io/ashconnolly/pen/1b40a412477289047954440ef3ed2242?editors=1010), but note routing doesn’t work in codepen. 

There is a list page, and a click through page with more details.  

The details page (HolidayPage) is linked to using an object property from the state object using push browserHistory -  

`<Route path="/:HolidayId" component={HolidayPage}/>`  

I’m confused how to access the state object from this `HolidayPage` component as it isn't a child of the root app (and thus not adjacent to the state object), can i pass this route the state object as a property?

In the `HolidayPage` component I'm wanting to access the state object to output the holiday details for that specific page, eg the route `/holiday_2` would show the object data from - `state.holidays.holiday_2.details`.

Or if i used nested roots and inserted my component into the root component using {this.props.children} ([as seen here](http://codepen.io/bradwestfall/pen/reaWYL?editors=1010)) , I’m then confused how to pass state object properties to the inserted component. 

my app has a state object of 

```
holidays: {
            holiday_1 : {
                name : 'France',
                details : 'Lorem ipsum dolor sit amet',
            },
            holiday_2 : {
                name : 'Italy',
                details : 'Lorem ipsum dolor sit amet',
            },
            holiday_3 : {
                name : 'Spain',
                details : 'Lorem ipsum dolor sit amet',
            },
        }

```

routing setup like so - 

```
ReactDOM.render((
 <Router history={browserHistory} >
    <Route path="/" component={MainLayout} />
    <Route path="/:HolidayId" component={HolidayPage}/>     
</Router>   
), document.getElementById('main'))

```

And to direct to the dynamic pages I'm using this code - 

```
    gotoHoliday : function (e) {
    e.preventDefault();             
    var HolidayId = this.props.index;     
    browserHistory.push(HolidayId);           
},

```

On the holiday page I can show the holiday id using `{this.props.params.HolidayId}` but I'm unsure how to display the details of this `HolidayId` object.

If anyone can help me, I'd really appreciate it! :)