React应用页面索引、命名规范与文件夹结构选型咨询

我想了解其他JavaScript开发者对文件名与项目结构的看法。目前我的项目里，每个页面和组件都单独放在对应文件夹下，用index.tsx（或js）命名，但担心后续接手的开发者会遇到困惑。比如About页面，是继续沿用现有./About/index.tsx的结构，还是改成./About/about.tsx更好？目前我能看到的唯一区别就是导入路径的长度略有不同。

以下是当前项目的文件结构：

├─ src
│  ├─ App.tsx
│  ├─ components
│  │  ├─ ArrowIcon
│  │  │  └─ index.tsx
│  │  ├─ Footer
│  │  │  ├─ index.tsx
│  │  │  └─ styles.module.css
│  │  ├─ FormError
│  │  │  ├─ index.tsx
│  │  │  └─ styles.module.css
│  │  ├─ Header
│  │  │  ├─ header.module.css
│  │  │  ├─ index.tsx
│  │  │  ├─ Logo
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  └─ Navigation
│  │  │     ├─ PrimaryNav.tsx
│  │  │     ├─ SecondaryNav.tsx
│  │  │     └─ styles.module.css
│  │  ├─ IntroHeader
│  │  │  ├─ index.tsx
│  │  │  └─ styles.module.css
│  │  ├─ Layout
│  │  │  ├─ Container
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  ├─ index.module.css
│  │  │  └─ index.tsx
│  │  └─ PageHeader
│  │     ├─ index.tsx
│  │     └─ styles.module.css
│  ├─ Content
│  │  ├─ Configuration
│  │  │  └─ ConfigurationHome.ts
│  │  ├─ Footer
│  │  │  └─ footer.json
│  │  ├─ Home
│  │  │  ├─ About.json
│  │  │  ├─ FAQ.ts
│  │  │  └─ Tutorial.json
│  │  ├─ Navigation
│  │  │  └─ index.ts
│  │  ├─ Sagacity
│  │  │  ├─ History
│  │  │  │  └─ HistoryContent.ts
│  │  │  ├─ Management
│  │  │  │  └─ ManagementContent.ts
│  │  │  └─ SagacityContent.ts
│  │  ├─ Support
│  │  │  └─ supportHome.ts
│  │  └─ Terminal
│  │     └─ terminalHome.ts
│  ├─ index.css
│  ├─ main.tsx
│  ├─ pages
│  │  ├─ Configuration
│  │  │  ├─ BusinessUnits
│  │  │  │  ├─ BusinessUnits
│  │  │  │  │  ├─ Create
│  │  │  │  │  │  └─ index.tsx
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ styles.module.css
│  │  │  │  └─ SupportContacts
│  │  │  │     └─ index.tsx
│  │  │  ├─ index.tsx
│  │  │  ├─ Merchants
│  │  │  │  ├─ BillingGroupChains
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ BillingGroupDisbursementHold
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ BillingGroups
│  │  │  │  │  ├─ Edit
│  │  │  │  │  │  └─ [id].tsx
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ FeeTemplates
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  ├─ PaymentChannels
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ RelationshipManager
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  ├─ ODFIs
│  │  │  │  ├─ BankExpenses
│  │  │  │  │  ├─ Create
│  │  │  │  │  │  ├─ index.tsx
│  │  │  │  │  │  └─ styles.module.css
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ ExpenseBatch
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ FinancialInstitution
│  │  │  │  │  ├─ Create
│  │  │  │  │  │  └─ index.tsx
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ RoutingNumbers
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  ├─ Partners
│  │  │  │  ├─ Create
│  │  │  │  │  ├─ index.tsx
│  │  │  │  │  └─ styles.module.css
│  │  │  │  ├─ Details
│  │  │  │  │  ├─ index.tsx
│  │  │  │  │  └─ styles.module.css
│  │  │  │  └─ index.tsx
│  │  │  ├─ Profiles
│  │  │  │  ├─ APIProfiles
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ ExternalUsers
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ HeartlandUsers
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  ├─ styles.module.css
│  │  │  └─ System
│  │  │     ├─ index.tsx
│  │  │     └─ styles.module.css
│  │  ├─ Home
│  │  │  ├─ About
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  ├─ Contact
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  ├─ Faq
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  ├─ HealthCheck
│  │  │  │  └─ index.tsx
│  │  │  ├─ Tutorial
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  └─ VersionHistory
│  │  │     └─ index.tsx
│  │  ├─ Sagacity
│  │  │  ├─ History
│  │  │  │  ├─ AuthenticationRequests
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ BankAccounts
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ Consumers
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ FailedAPICalls
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ History
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  ├─ Statistics
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ VerificationRequests
│  │  │  │     └─ index.tsx
│  │  │  ├─ index.tsx
│  │  │  ├─ Management
│  │  │  │  ├─ BusinessUnits
│  │  │  │  │  ├─ Configure
│  │  │  │  │  │  └─ index.tsx
│  │  │  │  │  ├─ Create
│  │  │  │  │  │  └─ index.tsx
│  │  │  │  │  ├─ Details
│  │  │  │  │  │  └─ index.tsx
│  │  │  │  │  ├─ Edit
│  │  │  │  │  │  └─ index.tsx
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ GIACTInvoices
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ Global
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  ├─ Management
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ Merchants
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ Users
│  │  │  │     └─ index.tsx
│  │  │  └─ styles.module.css
│  │  ├─ Support
│  │  │  ├─ ACHFiles
│  │  │  │  ├─ ACHEntryFinder
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ ACHFiles
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ ACHRejects
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ index.tsx
│  │  │  ├─ Automation
│  │  │  │  ├─ Alerts
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  ├─ Jobs
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ Subscriptions
│  │  │  │     ├─ Create
│  │  │  │     │  └─ Index.tsx
│  │  │  │     └─ index.tsx
│  │  │  ├─ Bulwark
│  │  │  │  ├─ Bulwark
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  ├─ RiskRuleConfiguration
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ RiskRuleEnforcement
│  │  │  │     └─ index.tsx
│  │  │  ├─ Consumers
│  │  │  │  ├─ Blacklist
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ Consumers
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  ├─ ProvisionalWhitelist
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ Whitelist
│  │  │  │     └─ index.tsx
│  │  │  ├─ index.tsx
│  │  │  ├─ Invoices
│  │  │  │  ├─ BillingGroup
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ Partner
│  │  │  │     └─ index.tsx
│  │  │  ├─ Logging
│  │  │  │  ├─ Emails
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ FailedApiCalls
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ index.tsx
│  │  │  ├─ Returns
│  │  │  │  ├─ Exceptions
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ index.tsx
│  │  │  │  ├─ NoticeOfChange
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ Reinitiations
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ ReturnDetails
│  │  │  │  │  └─ index.tsx
│  │  │  │  ├─ ReturnFiles
│  │  │  │  │  └─ index.tsx
│  │  │  │  └─ ReturnReconciliations
│  │  │  │     └─ index.tsx
│  │  │  └─ styles.module.css
│  │  └─ Terminal
│  │     ├─ index.tsx
│  │     ├─ styles.module.css
│  │     └─ VirtualTerminal
│  │        └─ index.tsx
│  ├─ Utils
│  │  ├─ Enums
│  │  │  ├─ MerchantTypeId.ts
│  │  │  ├─ ODFI.ts
│  │  │  ├─ RelationshipManager.ts
│  │  │  ├─ States.ts
│  │  │  └─ SupportContactId.ts
│  │  ├─ Func
│  │  └─ Interfaces
│  │     ├─ Configuration
│  │     │  ├─ Merchants
│  │     │  │  ├─ BillingGroupChains
│  │     │  │  │  └─ BillingGroupChains.ts
│  │     │  │  ├─ BillingGroups
│  │     │  │  │  └─ BillingGroupCreate.ts
│  │     │  │  ├─ FeeTemplate
│  │     │  │  │  └─ FeeTemplate.ts
│  │     │  │  ├─ Partners
│  │     │  │  │  └─ Partners.ts
│  │     │  │  └─ RelationshipManagers
│  │     │  │     └─ RelationshipManagers.ts
│  │     │  └─ Partners
│  │     └─ NavItems.ts
│  └─ vite-env.d.ts
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

两种命名方案的优劣势对比 #

保留index.tsx的优势 #

• 导入路径更简洁：可以直接写import About from './About'，无需指定文件名，在多层嵌套结构下能减少路径长度
• 资源聚合更自然：文件夹可以统一收纳组件的样式、测试用例、工具函数等关联文件，所有相关内容集中管理，结构清晰
• 社区认知度高：React官方示例、多数大型开源项目都采用这种模式，接手的开发者大概率熟悉这套规则

改用about.tsx的优势 #

• 文件用途更直观：从文件名就能直接识别页面/组件功能，不用打开文件夹确认，搜索文件时更高效