react js react-router-dom stores not pass by providers - reactjs

Question

I'm using react js with mobx and I'm trying to pass stores in providers and use it but,it seems It's not pass by the providers and I don't have access to it.
in addition when I'm trying to inject the UserStore, the web app is failed and throw an error that UserStore is not available
import { Switch, Route} from 'react-router-dom';
import React, {Component} from 'react';
import {Router} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import {Provider} from 'mobx-react'
import { TodoStore,UserStore, ModalsStore} from '../stores'
import App from './App';
import {Login} from '../screens'
const stores = { UserStore}
const browserHistory = createBrowserHistory();
export default class Root extends Component {
render() {
return (
<Provider stores={stores}>
<Router history={browserHistory}>
<Switch>
<Route exact path='/login' component={Login}/>
<Route component={App}/>
</Switch>
</Router>
</Provider>
)
}
}
piece of my App component
#observer
export default class App extends Component {
constructor(props){
super(props);
console.log('appProps',props)
}
render() {
...........
}
UserStore
import {observable,action} from 'mobx'
class UserStore {
#observable token = false
#observable first_name = '';
#observable last_name = ''
#action setUser(data) {
this.token = data.token;
this.first_name = data.first_name;
this.last_name = data.last_name;
}
#action updateUser(data) {
this.first_name = data.first_name;
this.last_name = data.last_name;
}
#action setToken(token){
this.token = token;
}
}
const singelton = new UserStore()
export default singelton
I'm trying to use the userStore and have access but in console i get

Answer 1

You have to #inject('stores') in your App class.
Like this:
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
#inject('stores')
#observer
export default class App extends Component {
render() {
console.log(this.props.stores);
return (
<div>{ /* your components */}</div>
);
}
}
Basically for every class, if you want the store in the props, you have to use inject.
Personally, I prefer import stores from './UserStore' without Provider and inject.
In this way, you can access the store directly, and set any observable inside store the same way as setState.
The code below is the MobX way to use singleton store with observer and observable without using setState():
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import stores from './userStore';
#observer
export default class App extends Component {
render() {
return (
<div>
<input value={stores.first_name} onChange={this.onChangeHandler}/>
</div>
);
}
onChangeHandler = e => {
// MobX will setState and trigger the React re-render for you
stores.first_name = e.target.value;
}
}