React-router 4路由，子组件属性和文件结构

Question

我对如何使用react-router 4通过一些客户端路由实现基本的ToDo App感到怀疑。

到目前为止，我目前的工作方式正在奏效，但我觉得这有点怪异，也许这不是处理此问题的最佳方法。

这是我当前的组件架构：

入口：index.js：

• 它将呈现包装在<App>组件中的<Router>组件。
• <App>组件是我的“智能”组件，具有我的逻辑和状态。

问题1： 由于App组件是我的“智能”状态组件。是否应该像以前那样将其包装在<Router>中？还是最好将<Router>向下移动一级，例如在<App>内部？

我将在下面仅描述组件的结构和职责，而不是粘贴完整的源代码，因为我的问题更关注文件/组件的结构和props的流程，而不是代码本身。

现在App.js文件/组件：

• 这是一个类组件。
• 它具有待办事项的状态。
• 它拥有将传递给子组件的功能以及ToDo项，因此它们可以添加和删除ToDos。
• 它呈现一个<Layout>组件，并向下传递ToDos和添加和删除ToDos的函数。

Layout.js文件/组件：

• 我选择使用此<Layout>组件，因此可以在此处插入一些“全局” CSS，以在其中服务整个应用程序（我使用的是样式组件）。也许是网格/弹性规则，媒体查询等。
• 它呈现<Header>，<Main>和<Footer>组件。我打算将它们全部用于与CSS布局相关的问题。
• 它还会向下传递从父props组件收到的<App>。

问题2：具有这样的<Layout>组件有意义吗？我希望这是做一些高级布局CSS规则（带有样式化组件）的好地方。

<Header>只是一个呈现两个<Links>的功能组件。

<Footer>只是一个简单的页脚。

Main.js文件/组件：

• 它呈现<Routes>组件。
• 在这一点上，我应该提到我正在尝试将所有<Route>组件保存在一个单独的文件中。因此，<Routes>组件。
• 它还会向下传递从父props组件收到的<Layout>。

问题3：尽管到目前为止对我来说还是有意义的，但是为所有<Route>组件创建单独的文件是一种好习惯吗？我在react-router的文档中不清楚。他们只有一个文件示例。

Routes.js文件/组件：

• 只有将所有<Route>保持在一起。
• 它将呈现<Route>s，它们将呈现我的UI演示文稿和交互式组件：根“ /”路径中的<TodoList>和<AddTodoForm>以及根目录中的<AboutPage> “ /关于”路径。

问题4：我发现props需要走多深很奇怪。从<App>到<Layout>到<Main>到<Routes>，最后是实际上将使用它们的组件<TodoList>和<AddTodoForm>。这是React中的正常现象吗？还有其他解决方法吗？我的曾祖父母/外祖父母组件可以某种方式直接传递props到他们的曾孙子吗？

问题5：是否至少有一种更简单的方法将这些道具传递下来？因此，我不必每次都重复输入道具的名称并在某个时候打错字吗？

问题6：仍然涉及深层次的props流程。 Redux能否解决这个问题，或者至少让它变得少一点陌生？

问题7：：将来当我需要嵌套路由时，是否仍可以将所有路由保留在单独的Routes.js文件中？根据我在文档中阅读的内容，我认为这是有可能的。

最终想法：无论如何，该应用和路由目前都可以正常使用。这里有一些其他图片来说明它更好一些。感谢您的帮助。

应用预览

反应DevTools详细信息

反应DevTools <Main>详细信息

更新：

刚刚发现我可以使用对象传播语法{...props}沿链转发道具。我想这回答了我的问题5。如：