Uncaught DOMException: Failed to execute 'pushState' on 'History': function () { [native code] } could not be cloned

Question

I am creating a small web app in reactjs template provided by visual studio 2017. I am stuck in a situation where i want a function to be passed as a state to a child component and then invoke that function through child component. I have a header component where i have a method called setLogInTrue() which i want to pass to my SignIn component. Below is my code:-

Header.tsx

class HeaderState {
isLoggedIn: boolean;
}

export class Header extends React.Component<HeaderProps, HeaderState> {
constructor() {
    super()
    this.state = ({ isLoggedIn: false });
    this.setLogInTrue= this.setLogInTrue.bind(this);
}

setLogInTrue() {
    this.setState({ isLoggedIn: true });
}

public render(){
//Some elements
<NavLink className="link header_row_link" to={{ pathname: '/signIn', state: this.setLogInTrue }}> //<-- i thought this would work and give the function in the location of SignIn components state but it does not.
              Sign In
</NavLink>
  }
}

SignIn.tsx

export class SignIn extends React.Component<RouteComponentProps<{}>, {}>  {

constructor() {
    super();
}

public render() {
    return <div className="signin_wrapper">
        <SignInContent />
    </div>;
  }
}

I want to access that function here and pass it to SignInContent component, and then invoke that function from there.

This code does not give me any compile time errors but whenever i click on the sign in link it gives me the following error

Uncaught DOMException: Failed to execute 'pushState' on 'History': function () { [native code] } could not be cloned.

i tried this solution but it does not work for me. It still gives me this error or gives state as undefined. I am very new to react and any help would be appreciated

Answer 1

This error occurs, as @Andreas mentioned in a comment, when DOM elements or anything non-serializable is used in the state object which is being assigned to window.history.state via history.replaceState or history.pushState. For example try: history.pushState({node: document.body}, 'title', '#/error') or use {node: History} instead and it will produce a similar DOMException error. To fix it simply remove the problematic objects or in some way be more deliberate about what is being pushed into the state.