{"id":4241,"date":"2024-12-13T11:14:44","date_gmt":"2024-12-13T11:14:44","guid":{"rendered":"https:\/\/www.rcvtechnologies.com\/blog\/?p=4241"},"modified":"2024-12-13T11:25:52","modified_gmt":"2024-12-13T11:25:52","slug":"flutter-navigation-mastering-routes-navigation-2-0-and-nested-navigators","status":"publish","type":"post","link":"https:\/\/www.rcvtechnologies.com\/blog\/flutter-navigation-mastering-routes-navigation-2-0-and-nested-navigators\/","title":{"rendered":"Flutter Navigation: Mastering Routes, Navigation 2.0, and Nested Navigators"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Flutter\u2019s navigation system is a core part of app development, allowing users to move between screens seamlessly. With Flutter\u2019s robust and flexible navigation capabilities, you can build simple single-screen apps to complex multi-page experiences with nested navigators. This blog will explore Flutter&#8217;s navigation concepts, including traditional routes, Navigation 2.0, and nested navigators.<\/span><\/p>\n<h3><b>1. Understanding the Basics of Flutter Navigation<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Flutter&#8217;s navigation is powered by the <\/span><span style=\"font-weight: 400;\">Navigator<\/span><span style=\"font-weight: 400;\"> widget, which manages a stack of routes (screens). Each new screen is pushed onto the stack and removed when navigating back. Here\u2019s a quick overview of the fundamental concepts:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Route:<\/b><span style=\"font-weight: 400;\"> represents a page or screen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Navigator:<\/b><span style=\"font-weight: 400;\"> Manages a stack of routes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MaterialPageRoute:<\/b><span style=\"font-weight: 400;\"> A common route used for transitions.<\/span><\/li>\n<\/ul>\n<p><b>Example: Navigating to a New Page<\/b><\/p>\n<div class=\"dm-code-snippet dark default  dm-normal-version\" style=\"background-color:#000;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-php\"><\/p>\n<pre class=\"dm-pre-admin-side\">Navigator.push(\r\n\r\n\u00a0\u00a0context,\r\n\r\n\u00a0\u00a0MaterialPageRoute(builder: (context) =&gt; SecondScreen()),\r\n\r\n);<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p>&nbsp;<\/p>\n<p><b>Example: Returning to the Previous Page<\/b><\/p>\n<div class=\"dm-code-snippet dark default  dm-normal-version\" style=\"background-color:#000;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-php\"><\/p>\n<pre class=\"dm-pre-admin-side\">Navigator.pop(context);<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p>&nbsp;<\/p>\n<h3><b>2. Introduction to Navigation 2.0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Flutter introduced Navigation 2.0 to offer more control and flexibility for apps with complex navigation requirements. It uses declarative APIs to build navigation logic, unlike the imperative style of Navigation 1.0.<\/span><\/p>\n<h4><b>Key Features of Navigation 2.0<\/b><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Declarative routing.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Deep linking support.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Seamless integration with the web.<\/span><\/li>\n<\/ul>\n<h4><b>Core Components<\/b><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Router widget<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Manages the app&#8217;s routing system.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>RouteInformationParser<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Converts route information into a user-defined data model.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>RouterDelegate<\/b><b>:<\/b><span style=\"font-weight: 400;\"> builds and manages the current navigation stack.<\/span><\/li>\n<\/ul>\n<p><b>Basic Example of Navigation 2.0<\/b><\/p>\n<div class=\"dm-code-snippet dark default  dm-normal-version\" style=\"background-color:#000;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-php\"><\/p>\n<pre class=\"dm-pre-admin-side\">class MyRouterDelegate extends RouterDelegate&lt;RouteSettings&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0with ChangeNotifier, PopNavigatorRouterDelegateMixin&lt;RouteSettings&gt; {\r\n\r\n\u00a0\u00a0final GlobalKey&lt;NavigatorState&gt; navigatorKey = GlobalKey&lt;NavigatorState&gt;();\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Navigator(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0key: navigatorKey,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pages: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0MaterialPage(child: HomePage()),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (showDetails) MaterialPage(child: DetailsPage()),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPopPage: (route, result) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!route.didPop(result)) return false;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0showDetails = false;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0notifyListeners();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return true;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0Future&lt;void&gt; setNewRoutePath(RouteSettings configuration) async {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/ Handle new route\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p>&nbsp;<\/p>\n<h3><b>3. Nested Navigators for Modular Apps<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Nested navigators are perfect for apps with tab bars or complex flows where each tab or section has its own independent navigation stack.<\/span><\/p>\n<h4><b>Why Use Nested Navigators?<\/b><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Keep navigation history separate for each section.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Enable smoother back navigation without affecting unrelated sections.<\/span><\/li>\n<\/ul>\n<p><b>Example: Nested Navigator with Bottom Navigation Bar<\/b><\/p>\n<div class=\"dm-code-snippet dark default  dm-normal-version\" style=\"background-color:#000;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-php\"><\/p>\n<pre class=\"dm-pre-admin-side\">class MyApp extends StatelessWidget {\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return MaterialApp(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0home: HomeScreen(),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n\r\n\r\n\r\nclass HomeScreen extends StatefulWidget {\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0_HomeScreenState createState() =&gt; _HomeScreenState();\r\n\r\n}\r\n\r\n\r\n\r\n\r\nclass _HomeScreenState extends State&lt;HomeScreen&gt; {\r\n\r\n\u00a0\u00a0int _selectedIndex = 0;\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0final _navigatorKeys = [\r\n\r\n\u00a0\u00a0\u00a0\u00a0GlobalKey&lt;NavigatorState&gt;(),\r\n\r\n\u00a0\u00a0\u00a0\u00a0GlobalKey&lt;NavigatorState&gt;(),\r\n\r\n\u00a0\u00a0];\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0void _onTap(int index) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0setState(() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_selectedIndex = index;\r\n\r\n\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0}\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Scaffold(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Stack(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0children: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_buildOffstageNavigator(0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_buildOffstageNavigator(1),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bottomNavigationBar: BottomNavigationBar(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currentIndex: _selectedIndex,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onTap: _onTap,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0items: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0Widget _buildOffstageNavigator(int index) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Offstage(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0offstage: _selectedIndex != index,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Navigator(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0key: _navigatorKeys[index],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onGenerateRoute: (routeSettings) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return MaterialPageRoute(builder: (context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (index == 0) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return HomePage();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return SettingsPage();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p>&nbsp;<\/p>\n<h3><b>4. Tips for Managing Complex Navigation<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Plan your routes:<\/b><span style=\"font-weight: 400;\"> Define a clear structure for your app\u2019s navigation before implementation.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Use named routes:<\/b><span style=\"font-weight: 400;\"> Simplify navigation by using route names.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Handle deep linking carefully:<\/b><span style=\"font-weight: 400;\"> Ensure your navigation stack aligns with the desired deep-linking behavior.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Separate navigation logic:<\/b><span style=\"font-weight: 400;\"> Use a dedicated service or state management solution to keep your navigation logic clean.<\/span><\/li>\n<\/ul>\n<h3><b>5. Common Challenges and Solutions<\/b><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Back navigation issues in nested navigators:<\/b><b><br \/>\n<\/b><span style=\"font-weight: 400;\"> Use <\/span><span style=\"font-weight: 400;\">WillPopScope<\/span><span style=\"font-weight: 400;\"> to handle back button presses explicitly.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Deep linking with Navigation 2.0:<\/b><b><br \/>\n<\/b><span style=\"font-weight: 400;\"> Ensure your <\/span><span style=\"font-weight: 400;\">RouteInformationParser<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">RouterDelegate<\/span><span style=\"font-weight: 400;\"> are set up correctly.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Performance in large navigation stacks:<\/b><b><br \/>\n<\/b><span style=\"font-weight: 400;\"> Avoid rebuilding the entire stack unnecessarily by using widgets like <\/span><span style=\"font-weight: 400;\">Offstage<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">IndexedStack<\/span><span style=\"font-weight: 400;\">.<\/span>&nbsp;<\/li>\n<\/ol>\n<h3><b>Conclusion<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Flutter&#8217;s navigation system is incredibly versatile, capable of handling everything from basic page transitions to complex, stateful navigation stacks. Whether you&#8217;re using the simplicity of Navigation 1.0, leveraging the flexibility of Navigation 2.0, or organizing your app with nested navigators, Flutter gives you the tools to create a seamless user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Are you ready to level up your Flutter navigation skills? Start experimenting with these techniques today and build apps that feel intuitive and polished!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter\u2019s navigation system is a core part of app development, allowing users to move between screens seamlessly. With Flutter\u2019s robust and flexible navigation capabilities, you can build simple single-screen apps to complex multi-page experiences with nested navigators. This blog will explore Flutter&#8217;s navigation concepts, including traditional routes, Navigation 2.0, and nested navigators. 1. Understanding the [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":4252,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[329,330],"tags":[],"class_list":["post-4241","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter","category-mobile-application-development"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/4241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=4241"}],"version-history":[{"count":2,"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/4241\/revisions"}],"predecessor-version":[{"id":4253,"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/4241\/revisions\/4253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/media\/4252"}],"wp:attachment":[{"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=4241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=4241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rcvtechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=4241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}