获课：xingkeit.top/5269/

React Router 实战：旅游商城页面导航结构的拆分与配置

旅游商城的页面结构看似简单，实则暗藏复杂的嵌套关系。首页、目的地列表、目的地详情、购物车、订单、用户中心，每一层都有独立的子页面。React Router 如果配置不当，要么路由散乱找不到文件，要么嵌套过深改一处炸三处。这篇文章不贴代码，只讲拆分逻辑和配置思路。

一、先画导航树，再写路由表

很多人上来就写 <Route>，结果写到第五层发现自己迷路了。正确的做法是先画一棵导航树。

旅游商城的根节点是三大块：首页、目的地、用户中心。目的地下挂列表页和详情页，详情页又有子标签（攻略、评论、相关推荐）。用户中心下挂订单、收藏、设置。购物车是独立一级，不属于任何模块。

画完树再映射路由，层级关系一目了然：哪些页面共享同一个布局，哪些页面需要独立布局，全部在树上标清楚。路由表只是导航树的翻译件，不是设计件。

二、三级路由结构：别把所有页面拍平

旅游商城最容易犯的错误是把所有页面写成一级路由。四十个页面全拍平，维护起来就是灾难。

第一级：布局路由。 用 <Outlet /> 定义整体框架。/ 对应首页布局，/destination 对应目的地模块布局，/user 对应用户中心布局。这一层只管框架，不管内容。

第二级：功能路由。 在各自布局内部再拆分子路由。比如 /destination/list 是列表页，/destination/:id 是详情页。这一层解决"在哪个模块里干什么"。

第三级：详情子路由。 目的地详情页内部有攻略、评论、推荐三个标签，用嵌套路由实现。/destination/:id/guide、/destination/:id/reviews、/destination/:id/related。这一层让详情页自身也能复用布局。

三级结构的好处是：改首页布局只动第一级，改目的地模块只动第二级，改详情页标签只动第三级，互不干扰。

三、动态路由：目的地详情页的核心

旅游商城最关键的动态路由是目的地详情。每个目的地有唯一 ID，URL 形式是 /destination/1001、/destination/2005。

配置时用 :id 占位符捕获参数，组件内通过 useParams 拿到 ID，再根据 ID 拉取对应目的地的数据。这里有个关键细节：参数变化时组件不会自动卸载重建，必须在 useEffect 里监听 id 变化，重新请求数据。很多人踩的坑就是参数变了但数据没刷新，用户从巴厘岛跳到马尔代夫，页面还显示巴厘岛的内容。

另外，目的地列表页到详情页的跳转，必须用 Link 或 useNavigate 传参，不能拼字符串。拼字符串容易出错，而且无法做路由校验。

四、404 与重定向：别让用户掉进黑洞

旅游商城的 404 处理要分两层。全局 404 放在路由最末尾，匹配所有未定义路径，跳转到友好的"页面不存在"页。模块级 404 放在目的地模块内，当用户访问一个不存在的目的地 ID 时，跳转到列表页或推荐页，而不是白屏。

重定向同样重要。/destination 默认跳到 /destination/list，/user 默认跳到 /user/orders。用户直接输模块地址时，不会看到空布局，而是直接进入最常用的子页面，体验更流畅。

五、一句话总结

React Router 的配置不是技术问题，是架构问题。先画导航树，再分三级路由，动态参数必须监听变化，404 和重定向兜底体验。旅游商城的路由一旦拆清楚，后续加新目的地、加新功能模块，都是往树上挂新叶子的事，不用动主干。