I have two routes /catalog and /catalog/order
In /catalog/order I have a checkbox an input and a button. Also I have a state for disabeling

    const [isCodeDisabled,setCodeDisabled] = useState(false);

    //other code
                    <Button
                        disabled = {isCodeDisabled}
                        onClick={disableButton}>
                        Check
                    </Button>

When I press the button it state is set to disabled and I can not use it. However if I go back to the /catalog and then to /catalog/order the button is again enabled. That is not what I expected
I am navigating through links(no page refresh).
How can I solve it? I thought that moving state in a higher component would help but maybe there is a better way?

CodePudding user response：

If a component is no longer part of the rendering tree then it gets unloaded/unmounted, meaning it is discarded together with all of its state.

To prevent this from happening, you could either put that piece of state in the parent component and pass it into the child as a prop, or you could alter the layout so the child is always part of the rendering tree with e.g. an isVisible={isChildVisible} property to control if it renders any output or not.