リアクションルータが特定のポイントを超えてルーティングしない

Question

私はフィットネスアプリを開発中です。つまり、ページ内のページ内にいくつかのページを動的に生成するために使用しているネストされたデータがあります。

ここには、私が使用しているデータとそれに付随する機能があります。

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> 
     ); 
    } 
} 

です

多分あなたはビジュアルを手伝ってほしいですか？ OKここでいくつかのビジュアルがあります。実際にクリックしたため、2番目の画像はURL以外の1番目の画像と同じです。

Routine1 Page

What is supposed to be the Day1 Page

編集：を明確にする、私はアプリは何をしたいのか、私はそのルーチンをクリックすると、ルーチン内のすべての日を表示し、Aのすべての演習を表示しています私はその日をクリックします。今はルーチンのすべての日を表示するために1つのレベルを下回るだけです。

Answer 1

私は自分の問題を理解しました。

私が間違っていたことは、日常のコンポーネントをルーチンコンポーネントに入れ子にすることでした。 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>