如何使用react-router

路由配置下载配置路由npm install react-router-dom在router文件夹内操作新建index.ts方便导出routers在App中import routers和uesRouters这个方法import React from react import { useRoutes } from react-router-dom import routes from ./router function App() { return div classNameApp{useRoutes(routes)}/div } export default App创建并在routes的index.tsx中//用于类型声明 import { RouteObject } from react-router-dom const routes: RouteObject[] [ { path: /discover, element: } ] export default routes接着就可以在views文件夹中创建对应组件的视图了如先创建discover后创建index.tsx导出Discover然后再在router的index.ts 中导入Discover//引入用于tsx中用到的jsx import React from react const Discover () { return divdiscover/div } export default Discover回到router的index.tsx中//导入react声明jsx import React from react //用于类型声明 import { RouteObject } from react-router-dom import Discover from /views/discover const routes: RouteObject[] [ { path: /discover, element: Discover / } ] export default routes创建代码片段写一段复用率高的代码//模板 import React, { memo } from react import type { FC, ReactNode } from react interface IProps { children?: ReactNode } const Template: FCIProps () { return divTemplate/div } // memo:只有当 props.children变化时Template组件才会重新渲染 // 如果父组件渲染但传给 Template的 props相同则跳过渲染 export default memo(Template)去到片段生成器的https://snippet-generator.app/ 并且将需要改动的地方换名字如Template可以换成${1:home}//模板 import React, { memo } from react import type { FC, ReactNode } from react interface IProps { children?: ReactNode } const ${1:home}: FCIProps () { return div${1:home}/div } export default memo(${1:home})设置名字和速写tsreact然后等待生成后copyreact typescript: { prefix: tsreact, body: [ //模板, , import React, { memo } from react, import type { FC, ReactNode } from react, , interface IProps {, children?: ReactNode, }, , const ${1:home}: FCIProps () {, return div${1:home}/div, }, , export default memo(${1:home}), ], description: react typescript }去到首选项 配置代码片段tsx中复制即可然后只要在代码区打入tsreact就可以快速生成模板代码使用该方法对view在router的index中配置//导入react声明jsx import React from react //用于类型声明 import { RouteObject } from react-router-dom import Discover from /views/discover import Mine from /views/mine import Focus from /views/focus import Download from /views/download const routes: RouteObject[] [ { path: /discover, element: Discover / }, { path: /mine, element: Mine / }, { path: /focus, element: Focus / }, { path: /download, element: Download / } ] export default routes在App的index.ts中设置导航栏import React from react import { Link, useRoutes } from react-router-dom import routes from ./router function App() { return ( div classNameApp div classNamenav Link to/discover发现音乐/Link Link to/mine我的音乐/Link Link to/focus我的关注/Link Link to/download下载客户端/Link /div div classNamemain{useRoutes(routes)}/div /div ) } export default App分包是 React 应用性能优化的核心技术它能将代码拆分成多个按需加载的包chunks显著提升应用加载速度和运行时性能。懒加载导入{lazy} from react// import Discover from /views/discover // import Mine from /views/mine // import Focus from /views/focus // import Download from /views/download const Discover lazy(() import(/views/discover)) const Mine lazy(() import(/views/mine)) const Focus lazy(() import(/views/focus)) const Download lazy(() import(/views/download))在懒加载未能加载出来的时候加上 包裹。Suspense 是 React 提供的异步加载边界处理机制它让组件可以等待某些操作完成后再渲染。在App.js中导入{ Suspense },在对应位置配置号内容fallbackimport React, { Suspense } from react import { Link, useRoutes } from react-router-dom import routes from ./router function App() { return ( div classNameApp div classNamenav Link to/discover发现音乐/Link Link to/mine我的音乐/Link Link to/focus我的关注/Link Link to/download下载客户端/Link /div Suspense fallbackloading...... div classNamemain{useRoutes(routes)}/div /Suspense /div ) } export default App为”发现“配置二级路由在discover文件夹内创建c-views文件夹存放子组件为每一个配置好index在routes的index中的discover添加上子组件必要时做好懒加载children: [ { path: /discover, element: Navigate to/discover/recommend/ }, { path: /discover/recommend, element: Recommend / }, { path: /discover/ranking, element: Ranking / }, { path: /discover/songs, element: Songs / }, { path: /discover/djradio, element: Djradio / }, { path: /discover/artist, element: Artist / }, { path: /discover/album, element: Album / } ]Album / } ]回到discover的index中添加Outlayconst Discover: FCIProps () { return ( div div导航栏/div Outlet / /div ) }集成redux