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'/>
</>
);
}
}
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.