无法使用 react-router-dom 链接对未安装的组件执行 React 状态更新

Question

我有一个接收道具的 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} />
            }
</>)}

Answer 1

这是因为handleToggle 在Link 重定向到另一个页面后被调用，试图更新未安装组件上的状态（setVisible），您应该延迟重定向直到切换发生，@987654321 @