import Debug from 'debug' ; import { observer } from 'mobx-react-lite' ; import React , { Fragment } from 'react' ; import { useRouterStore } from '../contexts' ; const debug = Debug ( 'msr:RouterView' ) ; export interface ViewMap { [ routeName ] : React . ReactNode ; } export interface RouterViewProps { viewMap : ViewMap ; } /**
 * Watches the router state and instantiates the associated UI component.
 * It expects two props: the `routerStore` and a `viewMap`. The `viewMap`
 * is a simple mapping from `routeNames` to React components.
 */ export const RouterView = observer ( ( { viewMap } ) => { const routerStore = useRouterStore ( ) ; const { routerState } = routerStore ; debug ( 'render %o' , routerState ) ; const view = viewMap [ routerState . routeName ] ; return view ? < Fragment > { view } < /Fragment> : null; } ) ;