wip: more work on updating syntad

packages/router/README.md

@@ -4,7 +4,7 @@ Dioxus-router provides a use_router hook that returns a different value dependin
 The router is generic over any value, however it makes sense to return a different set of VNodes
 and feed them into the App's return VNodes.
 
-Using the router should feel similar to tide's routing framework where an "address" book is assembled at the head.
+Using the router should feel similar to tide's routing framework where an "address" book is assembled at the head of the app.
 
 Here's an example of how to use the router hook:
 
@@ -13,32 +13,27 @@ static App: FC<()> = |ctx| {
 
     // Route returns the associated VNodes
     // This hook re-fires when the route changes
-    let route = use_router(ctx, |cfg| {
-        cfg.at("/").serve(|ctx| {
-            html!{ <LandingPage /> }
+    let route = use_router(ctx, |router| {
+        router.at("/").get(|path| {
+            rsx!{ <LandingPage /> }
         });
-
-        cfg.at("/shoes/:id").serve(|ctx| {
-            let id: Uuid = ctx.ctx.parse().unwrap();
-            html!{ <ShoesPage id=id /> }
+        router.at("/shoes/:id").get(|path| {
+            let id: Uuid = path.parse().unwrap();
+            rsx!{ <ShoesPage id=id /> }
         });
-
-        cfg.at("/pants/:id").serve(|ctx| {
-            let id: Uuid = ctx.ctx.parse().unwrap();
-            html!{ <PantsPage id=id /> }
+        router.at("/pants/:id").get(|path| {
+            let id: Uuid = path.parse().unwrap();
+            rsx!{ <PantsPage id=id /> }
         });
     });
 
-    html! {
-        <PanicBoundary model={|_| html!{<div>"Uh oh!"</div>}}>
-            <StateManager>
-                <ThemeSystem>
-                    <Header />
-                    {route}
-                </ThemeSystem>
-            </StateManager>
-        </PanicBoundary >
-    }
+    ctx.render(rsx!{
+        div {
+            Navbar {}
+            {route}
+            Footer {}
+        }
+    })
 };
 ```