Search code examples
reactjsreact-router-dom

Warning: A history supports only one prompt at a time


I am trying to prevent loosing unsaved data im my React app due to browser events such as Refresh, Back navigation. I put <Prompt/> component from react-router-dom to render method. And after that i got warning: Warning: A history supports only one prompt at a time Error Component Stack from Lifecycle (react-router.js). Everything works perfectly but this message in the console annoys me.

<Prompt
  message={() => window.inputEditing ? "Your unsaved edits will be lost. Leave this page anyway?" : true}
/>

Where can it be the problem? Actually in the page there is only one Prompt component all the time. No any Prompt components anywhere. Any ideas would be great. Thanks.

"react-router": "5.2.0",
"react-router-dom": "5.2.0", (tried to update it to 5.3.4 but it didn't help)
"react": "16.14.0"



class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/abc" render={Abc} />
        </Switch>     
      </Router>
    );
  }  
} 

class Abc extends React.Component {
  render() {
    return (
      <>
        <Prompt message="hello world"/>
        <input type='text'/> 
      </>
    );
  }  
} 

Solution

  • So, i analyzed my code, and despite on another Prompt was absent, i had found such code

    this.props.history.block(this.callback);
    

    Deleting of this line fixed the warning. So i need to review Prompt and this.props.history.block usage at the same time.