📆 2021.11.24

1. 问题描述：使用 antd 的 layout 布局，侧栏点击对应的项目，跳转到对应的组件，但是在跳转到对应的组件之后，再刷新，出现空白页。

运行效果：

刷新后效果：

2. 原因及解决：

• 原因：使用的是BrowserRouter
• 解决：使用HashRouter

import { BrowserRouter as Router, Route, Link,Switch } from "react-router-dom";
改为：
import { HashRouter as Router, Route, Link,Switch } from "react-router-dom";

📆 2021.11.27

1. 问题描述：使用的是通过获取路由参数让 menu 栏已选中的数据刷新后不会重置，虽然已获得对应的参数 id,但再次刷新后，然仍重置了。

2. 原因及解决：

• 原因：使用了defaultSelectedKeys,是默认值的意思，在 render 前，这个值就已经执行了，所以不能够获取 url 参数。
• 解决：将 defaultSelectedKeys 要改成 selectedKeys

<Menu theme="dark" mode="inline" selectedKeys={[this.state.currentItem]} >

3. 补充：可添加 key

// 异步的defaultValue 不生效的解决方法如下，添加key
// 注意key的添加方式
<Menu theme="dark" mode="inline" key={this.state.currentItem} defaultSelectedKeys={[this.state.currentItem]} >

4. 补充：还可能是数据的地址没有更新，比如是一个数组类型的数据（数组是引用类型的数据），要想数据结果更新，应使用扩展运算符，将地址更新。

// react+antd开发
<Table
  rowSelection={rowSelection}
  columns={columnsSource}
  //   {dataSource}改成{[...dataSource]}
  dataSource={[...dataSource]}
/>

说明：

在开发过程中，经常遇到组件数据无法更新，例如：当你用同一个表格展示不同数据的时候，当点击第 5 页后，再点击另外一份数据时发现还在第五页，并没有回到第一页。

怎么能让一个组件每次数据不一样时都重新加载呢，这样可以使用组件中的 key 值设置，给对应需要更新的组件设置一个 key 属性，key 只要是唯一的即可，这样每次这个 key 值不一样就能更新。