clear state of redux when navigating to different route

Question

I have this in my login.js, I tried to use wrong password to trigger it.

{this.props.msg && <MessageBanner content={this.props.msg} />}

But when the message appear, I try to navigate to signup.js, which also have the same

{this.props.msg && <MessageBanner content={this.props.msg} />}

The message isn't go away. Or I'm in signup.js page, make the error appear, I click back on the browser, the error did not disappear.

Anyway to clear a state when navigating with react-router?

Answer 1

It sounds like you need correctly setup a "toggle" system to show this error message you have...

Does you MessageBanner have a close button? If so you would want to attach a

onClick={this.setState=({toggleErrorMessage: !this.state.toggleErrorMessage})}

//on click reverse whatever this.state.toggleErrorMessage currently is... //so if currently true, after clicking will be false.

Then you could do something more like this.

{this.state.toggleErrorMesage ? this.props.msg && <MessageBanner content={this.props.msg} /> : undefined }

//if toggleErrorMessage is true, show msg and banner...