反應路由器不路由通過某個點

我正在一個健身應用程序，這意味着我有一些嵌套的數據，我正在使用動態生成頁面內的頁面內的一些頁面。反應路由器不路由通過某個點

下面是我使用的數據及其附帶的功能。

const data = [ 
     { 
      title: "Routine1", 
      days: [ 
       { 
        title: "Day1", 
        exercises: [ 
         { 
          title: "Bench Press"  
         } 
        ] 
       } 
      ] 
     } 
    ]; 

const dataMap = data.reduce(function (map, routine) { 
routine.daysMap = routine.days.reduce(function (daysMap, day) { 
    daysMap[day.title] = day 
    return daysMap 
    }, {}) 
    map[routine.title] = routine 
    return map 
}, {}) 

exports.getAll = function() { 
    return data 
} 

exports.lookupRoutine = function (title) { 
    return dataMap[title] 
} 

exports.lookupDay = function (routine, day) { 
    return dataMap[routine].daysMap[day] 
}

我想用路由器做出反應從顯示的所有程序，以顯示所有的日子在一個常規，顯示在這一天全部練習一個頁面一個頁面的索引頁面中去。

這裏是如何我已經建立了我的路線要做到這一點：

<Router history={browserHistory}> 
<Route path="/" component={App}> 
    <Route path="routine/:routine" components={{ content: Routine, header: RoutineHeader }}> 
    <Route path=":day" components={{ content: Day, header: DayHeader }}> 
    </Route> 
    </Route> 
</Route>

讓我們不要擔心頭組件，因爲他們並不真正現在做任何事情。但我會展示我如何設置App，Index，Routine和Day組件。提示：他們是一樣的...

應用組件

export default class App extends Component { 


render() { 
    const { content, header } = this.props 

    return (
     <div> 
     <header> 
      {header || <IndexHeader />} 
     </header> 
     <div> 
      {content || <Index />} 
     </div> 
     </div> 
    ) 
    } 
}

指數成份

export default class Index extends Component { 
    render() { 
    return (
     <div class="main-container"> 
     <h2>Routines</h2> 
      {data.getAll().map((routine, index) => (
       <Link class="main-link" key={index} to={`/routine/${routine.title}`}>{routine.title}</Link> 
     ))} 
     </div> 
    ) 
    } 
}

常規組件

export default class Routine extends Component { 
render() { 
    const routine = data.lookupRoutine(this.props.params.routine); 



return(
      <div class="main-container"> 
       <h2>{routine.title} Days</h2> 
        {routine.days.map((day, index) => (
         <Link key={index} class="main-link" to={`/routine/${routine.title}/${day.title}`}>{day.title}</Link> 
        ))} 
      </div> 
     ); 
    } 
}

日部件

export default class Day extends Component { 


render() { 
     const { routine, day } = this.props.params; 
     const dayItem = data.lookupDay(routine, day); 

     return(
      <div class="main-container"> 
       <h2>{dayItem.title} Exercises</h2> 

      </div> 
     ); 
    } 
}

也許你想要一些視覺效果來幫忙？好吧，這裏有一些視覺效果，請注意，除了在網址中，第二張圖片與第一張圖片相同，因爲我實際上已經點擊了一天。

Routine1 Page

What is supposed to be the Day1 Page

編輯：澄清，我想要的應用程序做的，是顯示所有的日子在例行當我點擊該程序，並顯示在所有練習那天我點擊那天。現在它只下到一個層次來顯示日常工作中的所有日子。

來源

2016-05-31 Jordan Coil

那麼，什麼是它目前在做什麼？你想要它做什麼？你有什麼問題？ – gravityplanx

只是做了一個簡短的編輯來澄清，我想要進入一個頁面，當你點擊那天，最終將顯示特定日子的所有練習，但現在點擊一天除了更新URL之外什麼都不做。 –

因此常規路線正確顯示所有天，但天路只顯示一個練習？ – gravityplanx

我想通了我的問題。

我做錯了什麼是嵌套日常組件的日常組件。 App組件是接受conent：和header：組件的組件，並且由於我在例程中嵌套了幾天，所以基本上是視圖的App沒有更新，因爲它沒有找到日組件。

正確的路由看起來是這樣的：

<Router history={browserHistory}> 
<Route path="/" component={App}> 
    <Route path="routine/:routine" components={{ content: Routine, header: RoutineHeader }}></Route> 
    <Route path="routine/:routine/:day" components={{ content: Day, header: DayHeader }}></Route> 
</Route> 
</Router>

來源

2016-05-31 21:09:13

反應路由器不路由通過某個點

回答

相關問題