React Speed Coding 路由实战React Router 多组件布局holygrail 与 fullpage 双模式一次讲透【免费下载链接】reactspeedcoding:rocket: Learn React with 30 reusable components, 15 chapters, and 3 single page apps. Fast start project with JavaScript ES6. React Hot Loading. React Router. Redux. PostCSS, FlexBox styling. Firebase database. Webpack packaging. Enzyme, Mocha, Chai BDD testing. ESLint and StyleLint. Browsersync.项目地址: https://gitcode.com/gh_mirrors/re/reactspeedcodingReact Speed Coding 是一个经典的 React 单页应用学习项目用 30 个可复用组件和 3 个完整应用带你快速上手 JavaScript ES6。本文以它的React Router 路由系统为主线一次讲透「holygrail 带侧栏布局」与「fullpage 整页布局」两种多组件布局模式以及它们之间如何一键切换 快速开始3 步跑通项目先把项目跑起来后面的布局切换才有直观感受克隆仓库若需离线学习clone 后本地运行即可git clone https://gitcode.com/gh_mirrors/re/reactspeedcoding安装依赖npm install启动开发服务器npm start基于 webpack-dev-server支持 React Hot Loading 热加载启动后访问任意路由比如/roadmap、/news、/blog/:slug你会看到不同布局组件在 URL 变化时被自动加载——这正是 React Router 单页应用路由的核心体验。先认识两种布局holygrail 与 fullpage这个项目把「布局」做成了可插拔的父级路由组件只有两种模式模式布局组件结构特征适用场景holygrailHomePage.jsx导航 头部 主内容区 右侧侧栏 底部内容站点、博客首页需要侧栏推荐位fullpageFullPage.jsx导航 头部 主内容区 底部无侧栏编辑器、图表等需要满屏空间的页面两种布局都基于经典的Holy Grail圣杯FlexBox 布局实现样式集中在 app/styles/containers/holy-grail.css外层.holygrail用flex-direction: column纵向排布.holygrail-body用flex: 1占满剩余高度在大屏媒体查询下body 切换为flex-direction: row侧栏与内容区自动左右分栏 holygrail 模式额外渲染了一个 Sidebar.jsx 组件里面包含推广按钮、侧边导航 NavigationSidebar.jsx 等这就是「带侧栏布局」名字的由来。React Router 路由树多组件布局是怎么挂载的所有路由定义集中在入口文件 app/index.jsx。项目用 react-router v2 声明了两棵完整的路由树stackedRoutesholygrail 模式app/index.jsx父级Route path/ component{HomePage}子路由挂 CardStack、Roadmap、PostDetail 等页面组件并通过IndexRoute指定首页默认页。fullpageRoutesfullpage 模式app/index.jsx结构几乎相同只是父级组件换成FullPage并多挂了/workflow-editor等需要 Firebase 的页面。这里有 4 个对新手很实用的路由知识点嵌套路由实现布局复用父路由负责「壳」导航、头部、底部子路由只负责「内容」。URL 切换时壳保持不变内容区局部更新避免整页闪烁。动态参数路由/blog/:slug把文章标识传入 PostDetail.jsx一个组件渲染任意文章。通配符 404path*兜底路由指向 MissingRoute.jsx输入任何不存在的路径都会优雅地提示而不是白屏。Redux 全局注入整个Router包在Provider store{store}中页面组件如 Roadmap可自由读取全局状态。一键切换布局改一行配置的事双模式的「开关」藏在站点配置 app/content/SiteData.js 里layout: fullpage启动时入口脚本根据这个值选择路由树switch (SiteData.layout) { case holygrail: activeRoutes stackedRoutes; break; case fullpage: activeRoutes fullpageRoutes; break; default: activeRoutes stackedRoutes; }也就是说同一个 URL 集合两种外观。想体验 holygrail 带侧栏的效果把配置改成holygrail再刷新即可。这种「布局即路由父组件」的写法是 React 多组件布局里非常值得借鉴的组织方式 延伸体验用 Roadmap 页面验证路由切到任一模式后访问/roadmap会看到项目内置的路线图应用app/components/Roadmap/index.jsx它演示了 Redux 状态、分类筛选与搜索正好帮你验证路由切换后状态是否正确保留。关键文件导航路由入口与双路由树app/index.jsx布局组件HomePage.jsx、FullPage.jsx侧栏组件Sidebar.jsx圣杯布局样式app/styles/containers/holy-grail.css布局切换配置app/content/SiteData.js404 页面app/components/MissingRoute.jsx写在最后通过 React Speed Coding 这个真实项目你会发现React Router 多组件布局的精髓不在于写多少路由而在于把布局抽成父路由组件、把页面抽成子路由组件再用一个配置项控制整套路由树的启停。理解了 holygrail 与 fullpage 双模式你就能在任意 React 单页应用里快速搭建「内容型 / 沉浸式」两套页面框架了 【免费下载链接】reactspeedcoding:rocket: Learn React with 30 reusable components, 15 chapters, and 3 single page apps. Fast start project with JavaScript ES6. React Hot Loading. React Router. Redux. PostCSS, FlexBox styling. Firebase database. Webpack packaging. Enzyme, Mocha, Chai BDD testing. ESLint and StyleLint. Browsersync.项目地址: https://gitcode.com/gh_mirrors/re/reactspeedcoding创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考