注意我们将所有页面都放在同一个目录下，这个目录以路由名称命名。尝试为每个父级路由建立一个目录，在这个目录中组织子路由。在这个示例中，我们创建了 User 目录并且将 List 页面和 Form 页面放在里面。这种方式使你看一眼 url 就能够轻松定位当前路由渲染的页面。
像上面的例子中的创建和编辑一个用户的路由一样，一个页面可能会被两个不同的路由渲染使用。
你可能注意到了所有的组件都包含 Screen 作为名称的前缀。当组件在组件目录外使用时，我们需要使用它们相对于 src 目录的路径来命名。位于 src/screens/User/List.jsx 的组件应该被命名为 ScreensUserList。
包括 Root.jsx 在内，我们的目录结构如下：src├─ components └─ screens ├─ User │ ├─ Form.jsx │ └─ List.jsx └─ Root.jsx 别忘了在 index.js 中引入作为应用根组件的 Root.jsx 。
如果你对一个页面长什么样子还有疑问，看看下面的示例，它就是用户表单的页面。import React from 'react';import UserForm from '../../components/User/Form/Form'; const ScreensUserForm = ({ match: { params } }) => ( <div> <h1> {`${!params.id ? 'Create' : 'Update'}`} User </h1> <UserForm id={params.id} /> </div>); export default ScreensUserForm;
最终，我们应用的目录结构会像下面这样：src├─ components │ ├─ User│ │ ├─ Form│ │ │ ├─ Form.jsx│ │ │ └─ Form.css│ │ └─ List.jsx│ └─ UI │└─ screens ├─ User │ ├─ Form.jsx │ └─ List.jsx └─ Root.jsx 回顾要点 展示型和容器组件放在 src/components 目录下通过模块/特性（module/feature）的方式组织组件基础的 UI 组件放在 src/components/UI 目录下保持页面简单，使用最简洁的结构和代码通过路由定义组织页面。对于 /user/list 路由地址来说，我们会有一个页面在 /src/screens/User/List.jsx。组件由相对 components 或 src 的路径命名，就是说，处于 src/components/User/List.jsx 位置的组件会被命名为 UserList。处于 src/screens/User/List.jsx 位置的组件会被命名为 ScreensUserList组件和目录同名时，不要在使用组件的时候重复这个名字。考虑这样一个场景，处于 src/components/User/List/List.jsx 位置的组件会被命名为 UserList 而不是 UserListList。
本文作者：也树
原文链接
更多技术干货敬请关注云栖社区知乎机构号：阿里云云栖社区 - 知乎
本文为云栖社区原创内容，未经允许不得转载。
