无法使用 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 ），你应该延迟重定向直到切换发生，here's a good example of how to do that

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

Can't perform a React state update on an unmounted component with react-router-dom links

javascript

compiler-warnings

react-router

react-hooks