next.js - 为什么当我更改我的 url 时我的 sidenav 会重新呈现？每个页面都使用 Layout.js，其中包括我的 sidenav

Question

每当我在 NextJS 中使用 router.push 更改我的 url 时，它都会触发我的 sidenav 退出屏幕并淡入 - 即使状态“showSide”保持为真。有没有人可以请解释为什么会发生这种情况？谢谢

//SideNav.js

const Container = styled(motion.div)`

      ****container styling****

`
const variants = {
        visible: { 
            translateX: 0,
            transition: {
                translateX: {
                    duration: 0.5,
                    type: "spring",
                    stiffness: 50,
                    damping: 12
                }
                
            }
        },
        hidden: {
            translateX: -300,
            transition: {
                translateX: {
                    duration: 0.5
                }
            }
        },
        exit: {
           translateX: -300,
           transition: {
               translateX: {
                   duration: 0.5
               }
           }
        }
    }


    **return (
        <AnimatePresence key="keyyyy">
                {showSide && (
                    <Container showSide={showSide} variants={variants} initial="hidden" animate="visible" exit="exit" key="mySideNav" >
                        {options && options.map((option, key) => {
                            return (
                                <Option active={router.pathname === option.to ? 1 : 0} key={key} onClick={() => {
                                    if(option.to) {
                                        router.push(option.to)
                                    }
                                }}>{option.name && option.name}</Option>
                            )
                        })}
                    </Container>
                )}
        </AnimatePresence>
    )

标签： next.jsframer-motion