React状态与路由的正确使用：类StackOverflow项目页面实现选型疑问

针对你要开发的类StackOverflow多页面React应用，优先选择react-router实现路由跳转，这是当前场景下的行业通用最佳实践，自定义state变量控制页面切换的方式，完全不适合这类需要独立可访问页面的项目核心需求。

纯state条件渲染方案的硬伤 #

你提到的用showPage类状态加if/else判断切页面的写法，写小Demo的时候确实上手很快，但放到实际项目里会遇到几个绕不开的问题：

• 页面状态完全不和URL绑定，一旦用户在回答详情页刷新浏览器、想把某道问题的链接分享给别人，直接就会回到默认的落地页，根本实现不了StackOverflow类站点最核心的「问题页面可独立访问、可转发」的基础能力。
• 没法对接浏览器原生的前进、后退导航，用户点一次返回键就会直接退出整个应用，完全不符合多页应用的基本交互逻辑。
• 后续页面数量变多之后，散落在各个组件里的if/else判断会快速膨胀，你还得从零自己实现页面参数传递、登录权限校验、页面懒加载、404异常兜底这些通用逻辑，维护成本会越来越高。

为什么react-router适配你的项目 #

作为React生态最成熟的路由管理方案，它刚好解决了上面纯state切页的所有痛点：

• 天然实现URL和页面的映射关系，你可以很轻松配置出/login、/ask、/questions/:questionId这类清晰的路由结构，刷新保留状态、链接分享、浏览器导航的能力全是开箱即用的。
• 内置了路由拦截（未登录就跳登录页）、动态路由参数读取、嵌套路由、页面级懒加载、404页面兜底这些能力，刚好适配你需要做权限控制、动态渲染不同问题详情的场景，不需要从零造轮子。
• 所有页面路径集中在路由配置层维护，后续新增、调整页面的时候直接改配置就行，比散落在组件里的零散条件判断好维护得多。

两种方案的适用场景边界 #

很多新手会纠结是不是所有页面都要上路由，其实完全没必要，两类方案各有适配的场景：

适合直接用state控制渲染、不需要引入react-router的场景 #

• 没有URL同步需求的临时交互：比如注册流程的多步表单、首页内的Tab切换、侧边抽屉/弹窗的显隐控制，这类操作本来就是用户的临时状态，不需要通过链接分享、刷新保留，用state实现反而更轻量，硬加路由只会增加不必要的复杂度。
• 逻辑极其简单的纯单页工具：比如纯前端的小计算器、本地待办清单，整个应用没有需要独立访问的子页面，所有操作都在同一个页面流里完成，这种场景下用state控制足够，硬上路由反而冗余。

必须使用react-router的场景 #

• 所有需要通过URL直达、支持刷新保留状态、可分享链接、支持浏览器前进后退导航的独立页面，比如你项目里的落地页、登录注册页、提问页、回答详情页，全在这个范围内。
• 应用规模超过3个以上独立页面、需要做登录权限分流、需要做页面级代码分割懒加载的项目，路由方案的长期维护成本远低于纯状态判断的写法。

最后给新手提个醒：刚开始用react-router的时候别一开始就照着网上的教程搞复杂的自定义封装，先把基础的BrowserRouter、Routes、Route三个核心API用熟，能把基础页面跑通了，再慢慢尝试动态路由、嵌套路由这些进阶能力，避免一开始就被复杂的封装逻辑绕晕。

内容的提问来源于stack exchange，提问作者Past