RouteViewGroup

React components whichrenders only the first matching route.

Example

import{ RouteView, RouteViewGroup }from'mobx-route/react';constroutes={allOrders:newRoute('/orders'),order:newRoute('/orders/:orderId'),}functionRouting() {return(<><RouteViewGroup><RouteViewroute={routes.allOrders}component={AllOrders} /><RouteViewroute={routes.order}component={OrderDetails} />{/*in mobx-route, any RouteView without provider route is considered always active.This can be used to achieve "otherwise" route behaviour within RouteViewGroup.Note: the order matters!*/}<RouteView>This is rendered when nothing above has matched</RouteView></RouteViewGroup>;</>);}

Props

layout

You can use this prop if you want to wrap all childRouteViewsinto React component

constLayout=({children})=>{return(<div><span>hello</span>{children}</div>)}...route2.open()...<RouteViewGrouplayout={Layout}><RouteViewroute={route2}><div>world</div></RouteView></RouteViewGroup>

output:

<div><div><span>hello</span><div>world</div></div></div>

otherwise

This prop sets the "default" route to be opened when no other child routes are opened.

Example:

<RouteViewGroupotherwise={otherwiseRouteToOpen}><RouteViewroute={route1} /><RouteViewroute={route2} /><RouteViewroute={routeN} /></RouteViewGroup>

Also you can passstringas default url which is needed to navigate

replace

This is additional navigation param forotherwiseprop