20230605----重返学习-路由懒加载后让受控组件得到props-react路由6-知乎日报

day-085-eighty-five-20230605-路由懒加载后让受控组件得到props-react路由6-知乎日报

路由懒加载后让受控组件得到props

react路由6

react路由6中的路由跳转及传参方案

• react路由6中的路由跳转及传参方案:

  • 路由跳转方案：
    • 基于NavLink组件与Link组件进行跳转。
    • 基于编程式导航进行跳转。
    • 基于组件进行跳转。
  • 路由传参方案：
    • 问号传参。
    • 隐式传参。
    • 路径传参。

• 路由跳转方案：

  • 基于NavLink组件与Link组件进行跳转。
    • 显示文案
      • replace: 跳转的时候，采用替换现在历史记录的方式。
      • 对象方式跳转:
        to={{
        pathname: “/home/worker”,
        search: “lx=fang”,
        }}
        state={{
        theType: “state-type”,
        }}

        工作台
        

    • 隐式传参
      to=“/home/worker”
      state={{
      theType: “state-type”,
      }}

      工作台
      

最简高阶组件

export default function withRouter(Component) {
  return function HOC(props) {
    return ;
  };
}

react路由6统一管理路由

路由懒加载

路由懒加载加导航守卫

路由懒加载加withRouter

路由懒加载加withRouter-自定义hook提取公共逻辑

• 可以发现有受控组件的概念了。

非受控组件中导航可以监听路由变化

知乎日报

启动服务

项目开始

• 知乎日报-WebApp
  • 技术栈：create-react-app、React18、redux/react-redux「你可以使用mobx或者@reduxjs/toolkit」、react-router-domV6、axios、less、AntdMobile…

依赖

看视频66中最后的介绍。

"axios": "^1.3.3",//发送axios请求
"blueimp-md5": "^2.19.0",//加密md5的。
"fastclick": "^1.0.6",让移动端是单击，而PC端是点击。单击是点击后之后300ms之后不再点击。这个插件是用触摸来模拟点击效果，让其没有太多的延迟。
"antd-mobile": "^5.28.0",//UI组件库。
"antd-mobile-icons": "^0.3.0",UI组件库图标。
"prop-types": "^15.8.1",属性规则校验。
"styled-components": "^5.3.6",样式私有化。
"lib-flexible": "^0.3.2",响应式布局-自动设置10rem为一个屏幕像素。
"postcss-pxtorem": "^6.0.0",响应式布局-处理.css与.less等样式中的代码的。
"less": "^4.1.3",使用less语法。
"less-loader": "^8.1.1",less编译器。
"cross-env": "^7.0.3",设置环境变量。
"http-proxy-middleware": "^2.0.6",跨域代理。
"redux": "^4.2.1",
"redux-logger": "^3.0.6",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.4.2",
"react-redux": "^8.0.5",
"react-router-dom": "^6.11.2",
"lodash": "^4.17.21",js功能函数工具库。自己的工具库是对它的补充。
"babel-plugin-styled-components-px2rem": "^1.5.5",把px转成rem的-把js中写的样式进行处理的-把样式私有化中的px单位转成rem单位。
"keepalive-react-component": "^1.0.1",在react中做类似于vue的keepalive组件。


// 以下为react自动生成的。
"@babel/core": "^7.16.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"babel-jest": "^27.4.2",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.18.1",
"camelcase": "^6.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"eslint": "^8.3.0",
"eslint-config-react-app": "^7.0.1",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",ES6的api兼容。
"react-dev-utils": "^12.0.1",
"react-dom": "^18.2.0",
"react-refresh": "^0.11.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"semver": "^7.3.5",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"web-vitals": "^2.1.4",
"webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1"

构建React纯正项目

• 从零开始构建React项目
  • 本项目不采用任何系解决方案（例如：淘系），就是基于最纯正的React实现开发。

智能化响应式适配

设计工具Sketch

进阶参考