fix: 🐛 detail page will not load new data after route change

src/webui/src/components/PackageSidebar/index.jsx

@@ -23,10 +23,20 @@ export default class PackageSidebar extends React.Component {
   }
 
   async componentDidMount() {
+    await this.loadPackageData(this.props.packageName)
+  }
+
+  async componentWillReceiveProps(newProps) {
+    if (newProps.packageName !== this.props.packageName) {
+      await this.loadPackageData(newProps.packageName)
+    }
+  }
+
+  async loadPackageData(packageName) {
     let packageMeta;
 
     try {
-      packageMeta = (await API.get(`sidebar/${this.props.packageName}`)).data;
+      packageMeta = (await API.get(`sidebar/${packageName}`)).data;
     } catch (err) {
       this.setState({
         failed: true

src/webui/src/modules/detail/index.jsx

@@ -22,22 +22,40 @@ export default class Detail extends React.Component {
     notFound: false,
   };
 
-  get packageName() {
-    let params = this.props.match.params;
+  getPackageName(props = this.props) {
+    let params = props.match.params;
     return `${(params.scope && '@' + params.scope + '/') || ''}${params.package}`;
   }
+  get packageName() {
+    return this.getPackageName();
+  }
 
   async componentDidMount() {
-     try {
-       const resp = await API.get(`package/readme/${this.packageName}`);
-       this.setState({
-         readMe: resp.data
-       });
-     } catch (err) {
-       this.setState({
-         notFound: true
-       });
-     }
+    await this.loadPackageInfo(this.packageName);
+  }
+
+  async componentWillReceiveProps(newProps) {
+    let packageName = this.getPackageName(newProps);
+    if (packageName === this.packageName) return;
+
+    await this.loadPackageInfo(packageName);
+  }
+
+  async loadPackageInfo(packageName) {
+    this.setState({
+      readMe: ''
+    });
+
+    try {
+      const resp = await API.get(`package/readme/${packageName}`);
+      this.setState({
+        readMe: resp.data
+      });
+    } catch (err) {
+      this.setState({
+        notFound: true
+      });
+    }
   }
 
   render() {