React 6路由新玩法从React 5平滑升级的完整步骤清单【免费下载链接】full-stack-with-react-and-spring-bootYour First Full Stack Application with React and Spring Boot项目地址: https://gitcode.com/gh_mirrors/fu/full-stack-with-react-and-spring-boot还在用 React 5 的Switch和history.push写路由full-stack-with-react-and-spring-boot这个 React Spring Boot 全栈示例项目把从 React 5 平滑升级到 React 6 路由的每一步改动都整理成了可直接对照的步骤清单帮你在一个 Todo 应用上完成无痛迁移几分钟看完即可动手。为什么需要升级React 5 路由用久了会踩哪些坑 项目的前端代码TodoApp.jsx 对应文件frontend/todo-app/src/components/todo/TodoApp.jsx原本运行在 React Router 5 时代典型写法是Switch包裹所有路由Route上加exact用component{LoginComponent}传组件用this.props.history.push()跳转用this.props.match.params取路径参数用Redirect做登录拦截而 React 6 对路由和传参采用了全新的方式Routes、element、useNavigate、useParams、Navigate。好在改动点非常集中——项目把每一处差异都按课程步骤记录在00000-react-6-updates/react6-vs-react5-step-by-step-changes.md中升级时照着改即可。升级前准备最快确认 Node 与 npm 版本的步骤 ⚙️React 6 项目建议的环境是Node v16.13.2 npm 8.1.2。如果你的版本较旧官方给出的升级命令是npm cache clean -f npm install -g n n stable执行前请确认以管理员权限或 sudo运行。升级完成后再执行node --version和npm --version核对版本。核心对照表React 5 vs React 6 路由改动一览 先有全局视角再动手改代码场景React 5 写法React 6 写法路由容器SwitchRoutes精确匹配exact属性不再需要传组件component{X}element{X /}页面跳转history.push()navigate()来自useNavigate路径参数match.paramsuseParams()登录跳转RedirectNavigate404 路由RouteSwitch 内无 pathRoute path*平滑升级的 8 个关键步骤清单 ✅第 7 步用 Routes 替换 Switch路由改用 element删掉Switch和所有exact把每条路由的component改为elementRoutes Route path/login element{LoginComponent /} / Route path/welcome element{WelcomeComponent /} / /Routes第 8 步用 useNavigate 实现页面跳转新增一个装饰组件WithNavigation.jsx把useNavigate包装成 props 注入任意需要跳转的组件return props Component {...props} navigate{useNavigate()} /;之后把this.props.history.push(/welcome)改成this.props.navigate(/welcome)并对路由声明换成LoginComponentWithNavigation /。第 9 步404 错误页不再需要 Switch一行搞定兜底路由Route path* element{ErrorComponent /} /第 10 步用 useParams 接收路径参数仿照第 8 步新增WithParams.jsxreturn props Component {...props} params{useParams()} /;路由写成/welcome/:name组件内用this.props.params.name替换this.props.match.params.name。第 12 步Router 内部布局重组HeaderComponent和FooterComponent放在Routes外面、Router里面保证它们在所有页面都显示Router HeaderComponent/ Routes ... /Routes FooterComponent/ /Router第 18 步让头部菜单获得导航能力HeaderComponent 里的Link菜单本身不用改但需要用withNavigation包裹后再渲染保证登录状态下的跳转链路完整。第 19 步AuthenticatedRoute 登录拦截改造这是唯一需要整体重写的文件frontend/todo-app/src/components/todo/AuthenticatedRoute.jsx已登录时返回{...this.props.children}原来是Route {...this.props} /未登录时用Navigate to/login /原来是Redirect to/login /用法变为把组件包进AuthenticatedRoute再放进element第 47 步Todo 组件的路由与表单提交收尾ListTodosComponent的跳转改用this.props.navigate(/todos/-1)TodoComponent用withParams(withNavigation(TodoComponent))双重装饰构造函数里id改读this.props.params.id表单提交成功后回列表也用navigate(/todos)升级完成后的验证清单 npm start启动无编译报错页面正常渲染未登录访问/todos会跳转到/login登录后跳转到/welcome/用户名并正确显示用户名头部 Home / Todos 菜单可正常切换访问不存在的路径显示 ErrorComponentTodo 的新增、编辑提交后能返回/todos列表项目中的参考文件清单 文件用途00000-react-6-updates/react6-vs-react5-step-by-step-changes.md逐步升级对照核心文档00000-react-6-updates/react-6-01-single-component-for-all.md重构前代码备份00000-react-6-updates/react-6-02-after-refactoring.md重构后代码备份含 React 6 完整写法00000-react-6-updates/react6-03-final.md课程结束时的最终版本代码frontend/todo-app/src/components/todo/当前 React 5 时代的前端组件源码frontend/todo-app/package.json依赖版本当前为 react-router-dom 4.x快速开始获取完整示例代码 git clone https://gitcode.com/gh_mirrors/fu/full-stack-with-react-and-spring-boot cd full-stack-with-react-and-spring-boot/frontend/todo-app npm install npm start升级的本质就一句话容器从 Switch 换成 Routes组件从 component 换成 element跳转和参数从 props 里的 history/match 换成 useNavigate/useParams 两个 Hook。按上面 8 个步骤逐项替换你的 Todo 应用即可平滑跑在 React 6 的路由体系上。【免费下载链接】full-stack-with-react-and-spring-bootYour First Full Stack Application with React and Spring Boot项目地址: https://gitcode.com/gh_mirrors/fu/full-stack-with-react-and-spring-boot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考