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

661
2
Jump to solution
12-20-2021 08:48 AM
MelvinSuratos
New Contributor II

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. 

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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])

 

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor

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
New Contributor II

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

0 Kudos