无法使用 react-router-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} />
            }
</>)}

解决方法

这是因为在 handleToggle 重定向到另一个页面后调用了 Link，尝试更新未挂载组件的状态（使用 setVisible），您应该延迟重定向直到切换发生，here's a good example of how to do that