我正在一个健身应用程序,这意味着我有一些嵌套的数据,我正在使用动态生成页面内的页面内的一些页面。反应路由器不路由通过某个点
下面是我使用的数据及其附带的功能。
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>
);
}
}
也许你想要一些视觉效果来帮忙?好吧,这里有一些视觉效果,请注意,除了在网址中,第二张图片与第一张图片相同,因为我实际上已经点击了一天。
What is supposed to be the Day1 Page
编辑:澄清,我想要的应用程序做的,是显示所有的日子在例行当我点击该程序,并显示在所有练习那天我点击那天。现在它只下到一个层次来显示日常工作中的所有日子。
那么,什么是它目前在做什么?你想要它做什么?你有什么问题? – gravityplanx
只是做了一个简短的编辑来澄清,我想要进入一个页面,当你点击那天,最终将显示特定日子的所有练习,但现在点击一天除了更新URL之外什么都不做。 –
因此常规路线正确显示所有天,但天路只显示一个练习? – gravityplanx