1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[14],{"94mP":function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/basics/nested_routes",function(){return o("xks6")}])},xks6:function(e,t,o){"use strict";o.r(t),o.d(t,"default",(function(){return u}));var n=o("nKUr"),r=(o("q1tI"),o("mCVq")),c=o("gRv6"),s=o("F9C7");function u(){return Object(n.jsxs)("div",{children:[Object(n.jsx)(s.b,{title:"Nested Routes"}),Object(n.jsxs)(s.d,{children:["Nesting routes with AutoRoute is as easy as populating the"," ",Object(n.jsx)(r.b,{children:"children"})," field of the parent"," ",Object(n.jsx)(r.b,{children:"AutoRoute"}),". Building upon our previous example in the ",Object(n.jsx)(c.a,{href:"/basics/root_router",children:"Root Router"})," section, we can update our router to use nested routes for the ",Object(n.jsx)("b",{children:"Books"})," and"," ",Object(n.jsx)("b",{children:"Account"})," routes",Object(n.jsx)(r.a,{codeString:"@MaterialAutoRouter(\n replaceInRouteName: 'Page,Route',\n routes: <AutoRoute>[ \n AutoRoute(path: \"/\", page: HomePage), \n AutoRoute(\n path: \"/books\",\n name: \"BooksRouter\",\n page: EmptyRouterPage,\n children: [\n AutoRoute(path: '', page: BooksPage),\n AutoRoute(path: ':bookId', page: BookDetailsPage),\n RedirectRoute(path: '*', redirectTo: ''),\n ],\n ),\n AutoRoute(\n path: \"/account\",\n name: \"AccountRouter\",\n page: EmptyRouterPage,\n children: [\n AutoRoute(path: '', page: AccountPage),\n AutoRoute(path: 'details', page: AccountDetailsPage),\n RedirectRoute(path: '*', redirectTo: ''),\n ],\n ),\n ],\n)\nclass $AppRouter {}\n"}),"Now you have separate routers for the ",Object(n.jsx)(r.b,{children:"HomePage"}),","," ",Object(n.jsx)(r.b,{children:"Books"})," routes and"," ",Object(n.jsx)(r.b,{children:"Account"})," routes. To navigate within a route, use the standard routing methods that we used in"," ",Object(n.jsx)(c.a,{href:"/basics/root_router",children:"Root Router"})]}),Object(n.jsxs)(s.d,{title:"Navigating between routers",children:["Routing controllers are context-scoped, so we must perform an additional step when navigating across routers. If we want to navigate from the"," ",Object(n.jsx)(r.b,{children:"BooksRouter"})," to"," ",Object(n.jsx)(r.b,{children:"AccountRouter"}),", we need to:",Object(n.jsxs)("ol",{children:[Object(n.jsxs)("li",{children:["get the router (",Object(n.jsx)(r.b,{children:"AccountRouter"})," in this case)"]}),Object(n.jsxs)("li",{children:["push the account routes that we we want by defining them in the"," ",Object(n.jsx)(r.b,{children:"children"})," parameter"]})]}),Object(n.jsx)(r.a,{codeString:"context.pushRoute(AccountRouter(\n children: [\n // push any sequence of Account routes here \n // the last route will be the one that is currently visible\n AccountRoute(),\n AccountSettingsRoute()\n ]\n));"}),Object(n.jsx)("b",{children:"Note"})," that we gave our ",Object(n.jsx)(r.b,{children:"AccountRouter"})," a"," ",Object(n.jsx)(r.b,{children:"name"})," parameter of"," ",Object(n.jsx)(r.b,{children:"AccountRouter"})," which allows this to work!"]}),Object(n.jsx)(s.a,{back:{name:"Page Transitions",href:"/basics/page_transitions"},next:{name:"Wrapping Routes",href:"/basics/wrapping_routes"}})]})}}},[["94mP",0,2,1,3,4,5]]]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.