fix: #92

src/keep-alive/withKeepAlive.js

@@ -1,22 +1,24 @@
 import React, { useContext, useRef, useEffect } from 'react'
 import CacheContext from './CacheContext'
 import * as cacheTypes from './cache-types'
-const withKeepAlive = (OldComponent, { cacheId = window.location.pathname }) => {
+const withKeepAlive = (OldComponent) => {
   const keepAliveWrapper = (props) => {
     const { mount, cacheStates, dispatch } = useContext(CacheContext)
     const ref = useRef(null)
 
     useEffect(() => {
-      const cacheState = cacheStates[cacheId]
+      const cacheState = cacheStates[props.match.url]
       if (cacheState && cacheState.doms && cacheState.status !== cacheTypes.DESTROY) {
         const doms = cacheState.doms
+        // 先清空 childNodes 再注入
+        ref.current.childNodes.forEach((child) => ref.current.removeChild(child))
         doms.forEach((dom) => ref.current.appendChild(dom))
       } else {
-        mount({ cacheId, element: <OldComponent {...props} dispatch={dispatch} /> })
+        mount({ cacheId: props.match.url, element: <OldComponent {...props} dispatch={dispatch} /> })
       }
     }, [cacheStates, dispatch, mount, props])
 
-    return <div id={`keepalive_${cacheId}`} ref={ref} />
+    return <div id={`keepalive_${props.match.url}`} ref={ref} />
   }
   return keepAliveWrapper
 }

src/util/common.js

@@ -172,7 +172,7 @@ export const existKeepAliveRouter = (routes, withKeepAlive) => {
       const { path, component, children, keepAlive, scroll } = router
       isExist = isExist || keepAlive
       if (keepAlive && path) {
-        router.component = withKeepAlive(component, { cacheId: path, scroll })
+        router.component = withKeepAlive(component, { scroll })
       }
       if (children) {
         getKeepAlive(children)