CJY0208 / react-router-cache-route

Route with cache for react-router V5 like <keep-alive /> in Vue
https://www.npmjs.com/package/react-router-cache-route
MIT License
1.14k stars 110 forks source link

请问 在cache-route中如何实现仅在切换路由列表时卸载当前页面组件 谢谢 #157

Closed smmzyl closed 1 year ago

smmzyl commented 1 year ago
    <CacheSwitch aliveControl={aliveControl}>
        {
            projectRouters.map((item, index) => {
                const { path, component, authority, redirectPath, ...rest } = item
                return item.cache ? (
                    // return (
                    <CacheRoute
                        exact
                        when="always"
                        key={index}
                        path={item.path}
                        component={item.component}
                        authority={authority}
                        redirectPath={redirectPath}
                        saveScrollPosition
                        cacheKey="cacheKey"
                        behavior={cached => (cached
                            ? {
                                style: {
                                    position: 'absolute',
                                    zIndex: -1024,
                                    opacity: 0,
                                    visibility: 'hidden',
                                    pointerEvents: 'none'
                                },
                                className: '__CacheRoute__wrapper__cached'
                            } : {
                                className: '__CacheRoute__wrapper__uncached'
                            }
                        )}
                        {...rest}
                    />
                )
                    :
                    <AuthorizedRoute
                        key={index}
                        path={item.path}
                        component={item.component}
                        authority={authority}
                        redirectPath={redirectPath}
                        {...rest}
                    >
                    </AuthorizedRoute>
            })
        }
    </CacheSwitch >
CJY0208 commented 1 year ago

可以使用手动缓存控制