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

时间:2016-09-24 17:49:13

标签: javascript reactjs react-router

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}个对象的详细信息。

如果有人可以帮助我,我真的很感激! :)

2 个答案:

答案 0 :(得分: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评估HolidayPagethis.props.route.holidays的状态。您必须在HolidayPage组件中编写一个帮助程序,以便在给定holidayId的情况下获取适当的假期。类似的东西:

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

答案 1 :(得分:1)

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

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

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