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

【问题标题】：React router - dynamic routes - accessing state object via the routerReact 路由器 - 动态路由 - 通过路由器访问状态对象
【发布时间】：2017-02-02 09:45:05
【问题描述】：

TLDR：我正在制作一个简单的 2 页应用程序，它从两个页面访问状态对象，并想知道如何构建我的反应路由器（在这个阶段移动到 redux 为时已晚：P）。

Codepen is here，但注意路由在 codepen 中不起作用。

有一个列表页面和一个包含更多详细信息的点击页面。
详细信息页面 (HolidayPage) 通过 push browserHistory 链接到使用状态对象中的对象属性 -
<Route path="/:HolidayId" component={HolidayPage}/>
我很困惑如何从这个HolidayPage 组件访问状态对象，因为它不是根应用程序的子应用程序（因此不与状态对象相邻），我可以将此路由状态对象作为属性传递吗？

在HolidayPage 组件中，我想访问状态对象以输出该特定页面的假期详细信息，例如路由/holiday_2 将显示来自-state.holidays.holiday_2.details 的对象数据。

或者如果我使用嵌套根并使用 {this.props.children} (as seen here) 将我的组件插入到根组件中，那么我会困惑如何将状态对象属性传递给插入的组件。

我的应用有一个状态对象

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'))

并指向我正在使用此代码的动态页面 -

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

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

如果有人可以帮助我，我将不胜感激！ :)

【问题讨论】：

如果有人回答了您的问题，请单击答案旁边的复选标记将其标记为正确。如果没有，请将问题更新为更具体。

标签： javascript reactjs react-router

【解决方案1】：

让您的 <HolidayPage /> 访问状态对象，然后通过 id 查找它。

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

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

【讨论】：

【解决方案2】：

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

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

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

然后你可以将假期信息作为路线的道具

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

ReactRouter 使路由道具可用于路由处理程序。所以现在您可以通过this.props.route.holidays 从MainLayout 和HolidayPage 评估状态。您必须在 HolidayPage 组件中编写一个帮助程序来获取给定假日 ID 的适当假日。类似的东西：

this.props.route.holidays['holiday_' + this.props.params.HolidayId]

【讨论】：