Mapview not interactive after routing from another page using react-router

[MelvinSuratos]

Anyone had issues with mapview being non-interactive when routed from another page using react-router?

On initial load of the root page (where the map is rendered), the map renders and is interactive, but when you navigate to another page and back to the root page with the map, the map is now not interactive. You can see the map being rendered, but you can't zoom in/out, click, or drag. 

I've attached a sample project that replicates this behavior. 

[ReneRubalcava · Accepted solution]

Your useEffect needs a little tweaking. You need to return the cleanup method inside the useEffect or the container is never set to null.

useEffect(() => {
  if (elRef.current) {
    view.container = elRef.current;
  }
  // clean up code run when route changes
  return () => {
    view.container = null
  }
  // be sure to let effect watch the ref
  // so it doesn't get away from you
}, [elRef])

[MelvinSuratos]

That worked! Thought I could have the cleanup method inside the init arrow function... smh... Thanks!