MobX integration with Wouter
Router for client navigation
const history = createBrowserHistory(); // const history = createMemoryHistory(); // const history = createHashHistory(); const router = createRouter({ history, // baseUrl // abortSignal // useStartViewTransition queryParams: createQueryParams({ history, }), });Exports from mobx-location-history
Simple ViewModel wrapper for pages
import { PageViewModelBase } from 'mobx-wouter'; class HomePageVM extends PageViewModelBase<{ pathParam: string }> { @observable accessor value = 'value'; mount() { super.mount(); document.title = 'Home'; // do something } }HOC for integration PageViewModel with view component of React
import { ViewModelProps } from 'mobx-view-model'; import { withPageViewModel } from 'mobx-wouter'; const HomePageView = observer(({ model }: ViewModelProps<HomePageVM>) => { return <div>{`render value - ${model.value}`}</div> }) export const HomePage = withPageViewModel(HomePageVM)(HomePageView);Same as withPageViewModel() but with lazy loading view and view model