Getting started

Installation

npm

npminstallmobx-route

yarn

yarnaddmobx-route

pnpm

pnpmaddmobx-route

Integration with React

import{ Route }from"mobx-route";import{ RouteView, Link }from"mobx-route/react";constroute=newRoute('/foo/bar/:baz');...<RouteViewroute={route}view={()=><div>Hello!</div>} />...<Linkroute={route}params={{ baz:1}} />

Writing first routes

import{ Route, RouteGroup }from"mobx-route";constfeed=newRoute("/");constusers=newRoute("/users");constuserDetails=users.extend("/:userId");exportconstroutes={feed,users,userDetails,memes:newRouteGroup({list:newRoute("/memes", { index:true}),details:newRoute("/memes/:memeId"),}),};

Attach routes to views in React

import{ observer }from"mobx-react-lite";import{ routes }from"@/shared/config/routing";import{ RouteView, Link }from"mobx-route/react";constAllUsersPage=()=>{return(<div><Linkroute={routes.userDetails}params={{ userId:1}}>Open user with id 1</Link></div>);};constUserDetailsPage=observer(()=>{const{params}=routes.userDetails.data!;return<div>{`User id: ${params.userId}`}</div>;});exportconstApp=()=>{return(<div><RouteViewroute={routes.userDetails}view={AllUsersPage} /><RouteViewroute={routes.users}view={UserDetailsPage} /></div>);};