前端学习知识点总结

1.前端在应用bootstrap时候样式丢失的问题，可以通过三种方式解决?

前端在应用bootstrap时候样式丢失的问题，可以通过三种方式解决

• 在public文件夹的index.html中的href路径中的.去掉

  <link rel="stylesheet" href="./css/bootstrap.css">
  变成：<link rel="stylesheet" href="/css/bootstrap.css">
  

• 在public文件夹的index.html中的href路径中将.换成%PUBLIC_URL%

  <link rel="stylesheet" href="./css/bootstrap.css">
  变成：<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
  

• 将BrowerRouter变成HashRouter

2.路由的严格匹配和模糊匹配

1 路由的模糊匹配：Route要的路径不能少，可以多，且顺序要一致。
2 路由的精准匹配：Router标签中加入exact={true}开启严格匹配，路径必须一致才能匹配。
3 严格匹配不能随便开启，需要再开，有时候开启会导致无法继续匹配二级路由

3.Redirect的使用：

一般写在所有路由的最下方，当所有路由都无法怕匹配时，跳转到Redirect指定的路由

<Switch>
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
    <Redirect to="/about"/>
</Switch>

4.嵌套路由的使用

1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的

5.向路由组件传递参数

• params参数
  ​ 路由链接(携带参数)：<Link to=‘/demo/test/tom/18’}>详情
  ​ 注册路由(声明接收)：
  ​ 接收参数：this.props.match.params
• search参数
  路由链接(携带参数)：<Link to=‘/demo/test?name=tom&age=18’}>详情
  注册路由(无需声明，正常注册即可)：
  接收参数：this.props.location.search
  备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
• state参数
  路由链接(携带参数)：<Link to={{pathname:‘/demo/test’,state:{name:‘tom’,age:18}}}>详情
  注册路由(无需声明，正常注册即可)：
  接收参数：this.props.location.state
  备注：刷新也可以保留住参数

6.编程式路由导航

• 借助this.prosp.history对象上的API对操作路由跳转、前进、后退
  this.prosp.history.push()
  this.prosp.history.replace()
  this.prosp.history.goBack()
  this.prosp.history.goForward()
  this.prosp.history.go()

7.BrowserRouter与HashRouter的区别

• 底层原理不一样：
  BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
  HashRouter使用的是URL的哈希值。
• path表现形式不一样
  BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
  HashRouter的路径包含#,例如：localhost:3000/#/demo/test
• 刷新后对路由state参数的影响
  (1).BrowserRouter没有任何影响，因为state保存在history对象中。
  (2).HashRouter刷新后会导致路由state参数的丢失！！！
  备注：HashRouter可以用于解决一些路径错误相关的问题。

8.antd的按需引入+自定主题

1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
2.修改package.json

 "scripts": {
     "start": "react-app-rewired start",
​      "build": "react-app-rewired build",
​      "test": "react-app-rewired test",
​      "eject": "react-scripts eject"
 },

3.根目录下创建config-overrides.js

​          //配置具体的修改规则
​          const { override, fixBabelImports,addLessLoader} = require('customize-cra');
​          module.exports = override(
​            fixBabelImports('import', {
​              libraryName: 'antd',
​              libraryDirectory: 'es',
​              style: true,
​            }),
​            addLessLoader({
​              lessOptions:{
​                javascriptEnabled: true,
​                modifyVars: { '@primary-color': 'green' },
​              }
​            }),
​          );

4.备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css’应该删掉