Javascript React路由器-动态路由-通过路由器访问状态对象

TLDR： 我正在制作一个简单的2页应用程序，它从两个页面访问state对象，并想知道如何构造我的react路由器（在这个阶段进入redux已经太晚了：P）

，但请注意，路由在codepen中不起作用

有一个列表页面和一个包含更多详细信息的点击页面。
详细信息页面（HolidayPage）链接到使用push browserHistory从状态对象使用对象属性-

我不知道如何从这个

HolidayPage

组件访问state对象，因为它不是根应用程序的子对象（因此与state对象不相邻），我可以将state对象作为属性传递给这个路由吗

在

HolidayPage

组件中，我想访问state对象以输出该特定页面的假日详细信息，例如route

/holiday_2

将显示来自-

state.holidays.holiday_2.details的对象数据

或者如果我使用嵌套根并使用{this.props.children}（）将我的组件插入到根组件中，那么我就不知道如何将状态对象属性传递给插入的组件

我的应用程序的状态对象为

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',
            },
        }

路由设置如下-

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

在假日页面上，我可以使用
{this.props.params.HolidayId}
显示假日id，但我不确定如何显示此
HolidayId
对象的详细信息

如果有人能帮我，我会非常感激的！：）
 因此首先，由于您的状态在路由之间共享，因此您需要将该状态保留在路由器上方的React树中的某个位置。请记住，数据只能向下传递。大概是这样的：

var App = React.createClass({
  getInitialState: function() {
    // return your holdays object
  },

  render() {
    return(
      <Router>
        <Route path="/" component={MainLayout}/>
        <Route path="/:HolidayId" component={HolidayPage}/>     
      </Router>
    )
}

因此，首先，由于您的状态在路由之间共享，因此您需要将该状态保留在路由器上方的React树中的某个位置。请记住，数据只能向下传递。大概是这样的：

var App = React.createClass({
  getInitialState: function() {
    // return your holdays object
  },

  render() {
    return(
      <Router>
        <Route path="/" component={MainLayout}/>
        <Route path="/:HolidayId" component={HolidayPage}/>     
      </Router>
    )
}

让您的
访问state对象，只需按id查找即可

var holidays = require ('./holidays.js');

class HolidayPage... {
    render() {
        return <div>
            { holidays[ this.props.params.HolidayId} ].name }
         </div>;
    }
}

var holidays=require（'./holidays.js'）；
班级假期网页。。。{
render（）{
返回
{holidays[this.props.params.HolidayId}].name}
;
}
}
让您的
访问state对象，只需按id查找即可

var holidays = require ('./holidays.js');

class HolidayPage... {
    render() {
        return <div>
            { holidays[ this.props.params.HolidayId} ].name }
         </div>;
    }
}

var holidays=require（'./holidays.js'）；
班级假期网页。。。{
render（）{
返回
{holidays[this.props.params.HolidayId}].name}
;
}
}
如果有人回答了您的问题，请单击答案旁边的复选标记将其标记为正确。如果没有，请更新问题以使其更具体。如果有人回答了您的问题，请单击答案旁边的复选标记以将其标记为正确。如果没有，请更新问题，使其更具体。
var holidays = require ('./holidays.js');

class HolidayPage... {
    render() {
        return <div>
            { holidays[ this.props.params.HolidayId} ].name }
         </div>;
    }
}