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

Question

I have a Sidenav component that takes in props. These props are then being used to render the custom sidenav for the page it's used on. Everything works, but when clicking on one of the links in the browser, this warning pops up:

It still redirects to the correct page and the page shows up, but the warning shows in the console every time one of the links is clicked. What have i done wrong? Here is my component code:

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} />
            }
</>)}

score 1 · Accepted Answer · answered Jun 04 '21 at 17:18

1

This is because handleToggle is called after the Link redirects to the other page, trying to update the state ( with setVisible ) on an unmounted component, you should delay the redirect until the toggle happens, here's a good example of how to do that

answered Jun 04 '21 at 17:18

Taki

17,320
4
26
47

I tried removing all the handleToggles but the same warning shows, thank you for the reply though! – julziemoon Jun 04 '21 at 17:24
1

remove `onHide={() => setVisible(false)}` – Taki Jun 04 '21 at 17:46
1

you have to create a `` and use it instead of `` – Taki Jun 04 '21 at 17:47
1

oh wow! That works!! Thank you so so so much!! It makes sense now :D – julziemoon Jun 04 '21 at 17:57

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

1 Answers1