What is the right way to use react-google-recaptcha with react-router?

[SleepingWhale]

My application has several routes and only some of them need to use recaptcha. I added component like this for each view component:

<Recaptcha
  ref={this.recaptchaRef}
  sitekey={RECAPTCHA_SITE_KEY}
  size="invisible"
  onChange={this.onSubmit}
  onErrored={this.logCaptchaError}
  theme="dark"
/>

It seems to work but obviously something is wrong with this approach:

1. Badge disappears after route changing
2. all recaptcha scripts get reloaded after route changing
3. After each initialization recaptcha elements persist in DOM

Any suggestions will be highly appreciated.

react-google-recaptcha version: 1.0.5

[ermrg]

Same issue. Is there any solution for a hidden badge after a route change?

[SleepingWhale]

@mrg-hub I switched to this one https://github.com/sarneeh/reaptcha

[lapotkov]

@SleepingWhale have you been using Strict mode in your app? If so, that is more of a development environment app issue rather than a production (and deployed) one: https://stackoverflow.com/questions/70890193/why-does-recaptcha-disappear-when-i-navigate-to-another-page. So, if you run locally without strict mode, or create a production version of your app, the issue you described should not reproduce.