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

我想使用React Router从显示所有例程的索引页面，到显示例程中所有日期的页面，到显示当天所有练习的页面。

以下是我设置路线的方法：

<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组件。提示：他们是一样的......

app组件

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

修改以澄清，我希望该应用做什么，当我点击该例程时显示例行程序中的所有日子，并在我点击那一天显示所有练习。现在它只下降一个级别来显示例程中的所有日子。

Answer 1

我发现了我的问题。

我做错了的是将日期组件嵌套在例程组件中。 App组件是接受conent：和header：组件的组件，并且由于我在例程中嵌套了几天，因此App（本质上是视图）没有更新，因为它没有找到日期组件。 / p>

正确的路由如下所示：

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

React路由器没有路由到某个点

1 个答案: