反应路由器不路由通过某个点

我正在一个健身应用程序，这意味着我有一些嵌套的数据，我正在使用动态生成页面内的页面内的一些页面。反应路由器不路由通过某个点

下面是我使用的数据及其附带的功能。

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

反应路由器不路由通过某个点

回答

相关问题