score:3

Accepted answer

try the following:

render() {
    const showLocalLoader = this.props.LoaderStore.showLocalLoader
    return( 
        <div>
        {/* note router container and "with router" wrapper one level up. */}
          <Switch>
              <Route render={()=>{return <MyComponent isLoading={showLocalLoader}><CoolChildComponent/></MyComponent>}} />
          </Switch>
        </div>
    );
}

this will cause the correct value to be sent as prop to the Route, there is an issue that sometimes the change in value doesn't trigger re-rendering when the observable is nested inside the return value of render.

let me know if it worked

score:0

sounds like you are missing an observer wrapper for MyComponent you can use @observer if you have support for decorators else you should enable decorators as shown here,

hopes that helps, if that's the issue here is a little explanation:

when you set an observable in a mobx store you can react to a change of this observable in a few ways (i'm just listing 2 for more options see the mobx docs):

  1. using autorun - more info
  2. using @observable - more info

both this methods work on the same principles, just that in the option of observable what happens is that the render function works like autorun works

it's pretty straight forward if you have an observable inside the function it will trigger it every time the observable in the function scope changes

good luck!


Related Query

More Query from same tag