Question

TLDR：我正在创建一个简单的2页应用程序，它从两个页面访问状态对象，并想知道如何构建我的反应路由器（在此阶段，它太迟了，无法转移到redux：P）。

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

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

在HolidayPage组件中，我想要访问状态对象以输出该特定页面的假日详细信息，例如路由/holiday_2将显示来自的对象数据 - {{1 }}

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

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

state.holidays.holiday_2.details

像这样的

路由设置 -

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); },显示假期ID，但我不确定如何显示此{this.props.params.HolidayId}个对象的详细信息。

如果有人可以帮助我，我真的很感激！：）

Answer 1

首先，由于您的状态是在路由之间共享的，因此您需要在路由器上方的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使路线道具可用于路线处理程序。现在，您可以通过MainLayout评估HolidayPage和this.props.route.holidays的状态。您必须在HolidayPage组件中编写一个帮助程序，以便在给定holidayId的情况下获取适当的假期。类似的东西：

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

Answer 2

授予<HolidayPage />对状态对象的访问权限，然后按ID查找。

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

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

React router - 动态路由 - 通过路由器

2 个答案: