React router не прокладывает мимо определенной точки

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

Возможно, вам нужны визуальные эффекты, чтобы помочь? хорошо, вот некоторые визуальные эффекты, обратите внимание, что второй снимок совпадает с 1-м, за исключением URL-адреса, потому что я на самом деле нажал на день.

Routine1 Page

What is supposed to be the Day1 Page

Edit: уточнить, что я хочу, чтобы приложение, чтобы сделать, это отобразить все дни в рутине, когда я нажимаю эту процедуру, и отображать все упражнения в день, когда я нажимаю этот день. сейчас он идет только на один уровень, чтобы показать все дни в рутине.

Answer 1

Я выяснил свою проблему.

То, что я делал неправильно, было вложением компонентов дня в обычные компоненты. Компонент App - это тот, который принимает компоненты conent: и header: components, и поскольку я вложенные дни в подпрограммы, приложение, которое по существу является видом, не обновлялось, поскольку оно не находило компоненты дня.

Правильная маршрутизация выглядит следующим образом:

<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>