Javascript Can'；t使用React路由器dom链接对未安装的组件执行React状态更新

我有一个Sidenav组件，可以接收道具。然后，这些道具将用于呈现所使用页面的自定义sidenav。一切正常，但单击浏览器中的某个链接时，会弹出以下警告：

它仍然会重定向到正确的页面并显示该页面，但每次单击其中一个链接时，控制台都会显示警告。我做错了什么？ 以下是我的组件代码：

import {
    Icon,
    Menu,
    Sidebar,
} from 'semantic-ui-react'
import { useState } from 'react';
import { Link } from 'react-router-dom';

const SideNav = (props) => {
    const { title, link_title1, link_route1, link_title2, link_route2, link_title3, link_route3 } = props;

    const [visible, setVisible] = useState(false)

    const handleToggle = () => {
        setVisible(!visible);
    };

    return (
        <>
            {visible && props ?
                <div>
                    <Sidebar
                        className="sidenav"
                        as={Menu}
                        animation='overlay'
                        icon='labeled'
                        inverted
                        onHide={() => setVisible(false)}
                        vertical
                        visible={visible}
                        width='thin'
                    >
                        <p>{title}</p>
                        <Link onClick={handleToggle} to={link_route1}>{link_title1}</Link>
                        <Link onClick={handleToggle} to={link_route2}>{link_title2}</Link>
                        {link_route3 && link_title3 ?
                            <Link onClick={handleToggle} to={link_route3}>{link_title3}</Link>
                            :
                            ''
                        }
                    </Sidebar>
                    <Icon
                        size="big"
                        name='caret square left outline'
                        onClick={handleToggle} />
                </div>
                :
                <Icon
                    size="big"
                    name='caret square right outline'
                    onClick={handleToggle} />
            }
</>)}

导入{
偶像
菜单，
侧边栏，
}来自“语义用户界面反应”
从“react”导入{useState}；
从'react router dom'导入{Link}；
const SideNav=（道具）=>{
const{title，link_title1，link_route1，link_title2，link_route2，link_title3，link_route3}=道具；
const[visible，setVisible]=useState（false）
const handleToggle=（）=>{
setVisible（！visible）；
};
返回(
{可见和道具（&P）？
setVisible（false）}
垂直的
可见={visible}
宽度='thin'
>
{title}

{link_title1}
{link_title2}
{link_route3&&link_title3？
{link_title3}
:
''
}
:
}
)}

这是因为在

链接重定向到另一个页面后调用了
handletooggle
，试图更新未安装组件的状态（使用
setVisible
），您应该延迟重定向，直到切换发生，
我尝试删除所有handletooggle，但显示相同的警告，谢谢你的回复！删除
onHide={（）=>setVisible（false）}
你必须创建一个
并使用它，而不是
哦，哇！真管用！！非常感谢你！！现在有道理了：D