陣營路由器 - 動態路由 - 通過路由器

TLDR訪問狀態對象：我做一個簡單的2頁的應用程序，訪問來自網頁的狀態對象，不知道如何構建我的反應路由器（和它的爲時已晚在這個階段轉移到redux：P）。陣營路由器 - 動態路由 - 通過路由器

Codepen is here，但注意路由不codepen工作。

有一個列表頁面，並通過網頁上的點擊有更多細節。
詳細信息頁面（HolidayPage）連接到使用推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對象。

如果有人能幫助我，我會很感激！ :)

來源

2016-09-24 Ash

如果有人回答了您的問題，請單擊答案旁邊的複選標記以標記爲正確。如果不是，請更新問題以更具體。 –

因此，首先，因爲你的狀態路由之間共享你需要的地方保持這種狀態在路由器上面的陣營樹。請記住，只能傳遞數據。事情是這樣的：

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組件中編寫一個助手才能獲取給定holidayId的適當假日。喜歡的東西：

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

來源

2016-09-24 18:30:55

給你<HolidayPage />訪問狀態對象，只是看它的ID。

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

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

來源

2016-09-24 18:31:13

陣營路由器 - 動態路由 - 通過路由器

回答

相關問題