{"doc_urls":["index.html#introduction","features/index.html#adding-the-router-to-your-application","features/routes/index.html#defining-routes","features/routes/index.html#example-content","features/routes/index.html#index-routes","features/routes/index.html#fixed-routes","features/routes/index.html#full-code","features/routes/nested.html#nested-routes","features/routes/nested.html#route-depth","features/routes/nested.html#defining-the-content-components","features/routes/nested.html#defining-the-root--segment","features/routes/nested.html#defining-the-nested--segment","features/routes/nested.html#full-code","features/routes/catch_all.html#catch-all-routes","features/routes/catch_all.html#creating-a-content-component","features/routes/catch_all.html#defining-the-routes","features/routes/catch_all.html#interaction-with-other-routes","features/routes/catch_all.html#full-code","features/routes/matching.html#matching-routes","features/routes/matching.html#code-example","features/routes/matching.html#matcher","features/routes/fallback.html#fallback-routes","features/routes/fallback.html#a-single-global-fallback","features/routes/fallback.html#more-specific-fallback-routes","features/routes/multiple-and-redirect.html#multiple-components--redirects","features/routes/multiple-and-redirect.html#multiple-components","features/routes/multiple-and-redirect.html#redirects","features/outlets.html#outlets","features/outlets.html#nested-outlets","features/outlets.html#named-outlets","features/outlets.html#outlet-depth-override","features/outlets.html#outlet-recursion","features/navigation/index.html#links--navigation","features/navigation/name.html#named-navigation","features/navigation/name.html#code-example","features/navigation/name.html#check-if-a-name-is-present","features/navigation/external.html#external-navigation","features/navigation/external.html#code-example","features/navigation/programmatic.html#programmatic-navigation","features/navigation/programmatic.html#acquiring-a--navigator","features/navigation/programmatic.html#triggering-a-navigation","features/navigation/programmatic.html#external-navigation-targets","features/query.html#query","features/query.html#accessing-the-query","features/query.html#setting-the-query","features/query.html#internal--and--external","features/query.html#named","features/failures/index.html#navigation-failures","features/failures/named.html#named-navigation-failure","features/failures/named.html#debug","features/failures/named.html#release","features/failures/external.html#external-navigation-failure","features/failures/external.html#failure-handling","features/failures/redirection-limit.html#redirection-limit-failure","features/failures/redirection-limit.html#debug","features/failures/redirection-limit.html#release","features/history-providers.html#history-providers","features/history-buttons.html#history-buttons","features/sitemap-generation.html#sitemap-generation","features/sitemap-generation.html#preparing-an-app","features/sitemap-generation.html#modifying-the-app-to-make-using-sitemaps-easier","features/sitemap-generation.html#sitemaps-with-parameter-names","features/sitemap-generation.html#sitemaps-with-actual-parameter-values","features/routing-update-callback.html#routing-update-callback","features/routing-update-callback.html#how-does-the-callback-behave","features/routing-update-callback.html#code-example","example/index.html#overview","example/index.html#youll-learn-how-to","example/first-route.html#creating-our-first-route","example/first-route.html#fundamentals","example/first-route.html#to-route-or-not-to-route","example/first-route.html#what-if-a-route-doesnt-exist","example/first-route.html#conclusion","example/building-a-nest.html#building-a-nest","example/building-a-nest.html#site-navigation","example/building-a-nest.html#active-link-styling","example/building-a-nest.html#url-parameters-and-nested-routes","example/building-a-nest.html#conclusion","example/navigation-targets.html#navigation-targets","example/navigation-targets.html#what-is-a-navigation-target","example/navigation-targets.html#external-navigation","example/navigation-targets.html#named-navigation","example/navigation-targets.html#the-special-root-index-name","example/redirection-perfection.html#redirection-perfection","example/redirection-perfection.html#what-is-this-redirect-thing","example/redirection-perfection.html#conclusion","example/redirection-perfection.html#challenges","example/full-code.html#full-code"],"index":{"documentStore":{"docInfo":{"0":{"body":118,"breadcrumbs":2,"title":1},"1":{"body":113,"breadcrumbs":6,"title":3},"10":{"body":57,"breadcrumbs":7,"title":3},"11":{"body":74,"breadcrumbs":7,"title":3},"12":{"body":83,"breadcrumbs":6,"title":2},"13":{"body":34,"breadcrumbs":6,"title":2},"14":{"body":84,"breadcrumbs":7,"title":3},"15":{"body":71,"breadcrumbs":6,"title":2},"16":{"body":86,"breadcrumbs":6,"title":2},"17":{"body":67,"breadcrumbs":6,"title":2},"18":{"body":46,"breadcrumbs":6,"title":2},"19":{"body":137,"breadcrumbs":6,"title":2},"2":{"body":9,"breadcrumbs":4,"title":2},"20":{"body":55,"breadcrumbs":5,"title":1},"21":{"body":29,"breadcrumbs":8,"title":2},"22":{"body":82,"breadcrumbs":9,"title":3},"23":{"body":170,"breadcrumbs":10,"title":4},"24":{"body":0,"breadcrumbs":8,"title":3},"25":{"body":18,"breadcrumbs":7,"title":2},"26":{"body":99,"breadcrumbs":6,"title":1},"27":{"body":85,"breadcrumbs":2,"title":1},"28":{"body":14,"breadcrumbs":3,"title":2},"29":{"body":122,"breadcrumbs":3,"title":2},"3":{"body":45,"breadcrumbs":4,"title":2},"30":{"body":101,"breadcrumbs":4,"title":3},"31":{"body":87,"breadcrumbs":3,"title":2},"32":{"body":157,"breadcrumbs":4,"title":2},"33":{"body":114,"breadcrumbs":6,"title":2},"34":{"body":95,"breadcrumbs":6,"title":2},"35":{"body":45,"breadcrumbs":7,"title":3},"36":{"body":58,"breadcrumbs":6,"title":2},"37":{"body":100,"breadcrumbs":6,"title":2},"38":{"body":14,"breadcrumbs":6,"title":2},"39":{"body":36,"breadcrumbs":6,"title":2},"4":{"body":59,"breadcrumbs":4,"title":2},"40":{"body":98,"breadcrumbs":6,"title":2},"41":{"body":29,"breadcrumbs":7,"title":3},"42":{"body":15,"breadcrumbs":2,"title":1},"43":{"body":44,"breadcrumbs":3,"title":2},"44":{"body":12,"breadcrumbs":3,"title":2},"45":{"body":38,"breadcrumbs":3,"title":2},"46":{"body":42,"breadcrumbs":2,"title":1},"47":{"body":15,"breadcrumbs":4,"title":2},"48":{"body":42,"breadcrumbs":8,"title":3},"49":{"body":14,"breadcrumbs":6,"title":1},"5":{"body":65,"breadcrumbs":4,"title":2},"50":{"body":80,"breadcrumbs":6,"title":1},"51":{"body":36,"breadcrumbs":8,"title":3},"52":{"body":102,"breadcrumbs":7,"title":2},"53":{"body":53,"breadcrumbs":8,"title":3},"54":{"body":14,"breadcrumbs":6,"title":1},"55":{"body":80,"breadcrumbs":6,"title":1},"56":{"body":86,"breadcrumbs":4,"title":2},"57":{"body":125,"breadcrumbs":4,"title":2},"58":{"body":15,"breadcrumbs":4,"title":2},"59":{"body":91,"breadcrumbs":4,"title":2},"6":{"body":61,"breadcrumbs":4,"title":2},"60":{"body":75,"breadcrumbs":8,"title":6},"61":{"body":105,"breadcrumbs":5,"title":3},"62":{"body":107,"breadcrumbs":6,"title":4},"63":{"body":13,"breadcrumbs":6,"title":3},"64":{"body":52,"breadcrumbs":5,"title":2},"65":{"body":58,"breadcrumbs":5,"title":2},"66":{"body":44,"breadcrumbs":2,"title":1},"67":{"body":51,"breadcrumbs":3,"title":2},"68":{"body":10,"breadcrumbs":6,"title":3},"69":{"body":51,"breadcrumbs":4,"title":1},"7":{"body":42,"breadcrumbs":6,"title":2},"70":{"body":123,"breadcrumbs":5,"title":2},"71":{"body":105,"breadcrumbs":6,"title":3},"72":{"body":29,"breadcrumbs":4,"title":1},"73":{"body":25,"breadcrumbs":4,"title":2},"74":{"body":199,"breadcrumbs":4,"title":2},"75":{"body":59,"breadcrumbs":5,"title":3},"76":{"body":314,"breadcrumbs":6,"title":4},"77":{"body":23,"breadcrumbs":3,"title":1},"78":{"body":16,"breadcrumbs":4,"title":2},"79":{"body":53,"breadcrumbs":4,"title":2},"8":{"body":41,"breadcrumbs":6,"title":2},"80":{"body":51,"breadcrumbs":4,"title":2},"81":{"body":208,"breadcrumbs":4,"title":2},"82":{"body":52,"breadcrumbs":6,"title":4},"83":{"body":14,"breadcrumbs":4,"title":2},"84":{"body":115,"breadcrumbs":4,"title":2},"85":{"body":28,"breadcrumbs":3,"title":1},"86":{"body":38,"breadcrumbs":3,"title":1},"87":{"body":139,"breadcrumbs":4,"title":2},"9":{"body":76,"breadcrumbs":7,"title":3}},"docs":{"0":{"body":"Whether or not you are building a website, desktop app, or mobile app, splitting your app's views into \"pages\" can be an effective method for organization and maintainability. For this purpose, Dioxus provides a router. To start utilizing it, add it as a dependency in your Cargo.toml file: [dependencies]\n# use this for native apps\ndioxus-router = \"*\"\n#use this for web apps\ndioxus-router = { version = \"*\", features = [\"web\"] } # in both cases replace * with the current version You can also use the cargo command to add the dependency: $ cargo add dioxus-router\n$ cargo add dioxus-router --features web If you are not familiar with Dioxus itself, check out the Dioxus book first. This book is intended to get you up to speed with Dioxus Router. It is split into two sections: The Features part explains individual features in depth. You can read it start to finish, or you can read individual chapters in whatever order you want. If you prefer a learning-by-doing approach, you can check ouf the example project . It guides you through creating a dioxus app, setting up the router and using some of its functionality. Please note that this is not the only documentation for the Dioxus Router. You can also check out the API Docs .","breadcrumbs":"Introduction » Introduction","id":"0","title":"Introduction"},"1":{"body":"In this chapter we will learn how to add the router to our app. By it self, this is not very useful. However, it is a prerequisite for all the functionality described in the other chapters. Make sure you added the dioxus-router dependency as explained in the introduction . In most cases we want to add the router to the root component of our app. This way, we can ensure that we have access to all its functionality everywhere. We add it by using the use_router hook # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\nuse dioxus::prelude::*;\n# extern crate dioxus_router;\nuse dioxus_router::prelude::*;\n# extern crate dioxus_ssr; // This is the component we pass to dioxus when launching our app.\nfn App(cx: Scope) -> Element { // Here we add the router. All components inside `App` have access to its // functionality. let routes = use_router( cx, // The router can be configured with this parameter. &|| RouterConfiguration { # synchronous: true, ..Default::default() }, // This tells the router about all the routes in our application. As we // don't have any, we pass an empty segment &|| Segment::empty() ); render! { h1 { \"Our sites title\" } // The Outlet tells the Router where to render active content. Outlet { } }\n}\n#\n# let mut vdom = VirtualDom::new(App);\n# let _ = vdom.rebuild();\n# assert_eq!(\n# dioxus_ssr::render(&vdom),\n# \"
Hello, Dioxus!
\"\n# );","breadcrumbs":"Defining Routes » Catch All Routes » Full Code","id":"17","title":"Full Code"},"18":{"body":"Make sure you understand how catch all routes work before reading this page. When accepting parameters via the path, some complex applications might need to decide what route should be active based on the format of that parameter. Matching routes make it easy to implement such behavior. The parameter will be URL decoded, both for checking if the route is active and when it is provided to the application. The example below is only for showing matching route functionality. It is unfit for all other purposes.","breadcrumbs":"Defining Routes » Matching Routes » Matching Routes","id":"18","title":"Matching Routes"},"19":{"body":"Notice that the parameter of a matching route has the same type as a catch all route . # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::{history::MemoryHistory, prelude::*};\n# extern crate dioxus_ssr;\n# extern crate regex;\nuse regex::Regex; struct Name; fn GreetingFemale(cx: Scope) -> Element { let route = use_route(cx).unwrap(); let name = route.parameter::Hello Mrs. Anna
\");","breadcrumbs":"Defining Routes » Matching Routes » Code Example","id":"19","title":"Code Example"},"2":{"body":"When creating a router we need to pass it a Segment . It tells the router about all the routes of our app.","breadcrumbs":"Defining Routes » Defining Routes","id":"2","title":"Defining Routes"},"20":{"body":"In the example above, both matching routes use a regular expression to specify when they match. However, matching routes are not limited to those. They accept all types that implement the Matcher trait. For example, you could (but probably shouldn't) implement a matcher, that matches all values with an even number of characters: # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n#\n#[derive(Debug)]\nstruct EvenMatcher; impl Matcher for EvenMatcher { fn matches(&self, value: &str) -> bool { value.len() % 2 == 0 }\n}","breadcrumbs":"Defining Routes » Matching Routes » Matcher","id":"20","title":"Matcher"},"21":{"body":"Sometimes the router might be unable to find a route for the provided path. We might want it to show a prepared error message to our users in that case. Fallback routes allow us to do that. This is especially important for use cases where users can manually change the path, like web apps running in the browser.","breadcrumbs":"Defining Routes » Fallback Routes (404 page) » Fallback Routes","id":"21","title":"Fallback Routes"},"22":{"body":"To catch all cases of invalid paths within our app, we can simply add a fallback route to our root Segment . # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\nuse dioxus::prelude::*;\n# extern crate dioxus_router;\nuse dioxus_router::{history::MemoryHistory, prelude::*};\n# extern crate dioxus_ssr; fn Index(cx: Scope) -> Element { render! { h1 { \"Index\" } }\n} fn Fallback(cx: Scope) -> Element { render! { h1 { \"Error 404 - Not Found\" } p { \"The page you asked for doesn't exist.\" } }\n} fn App(cx: Scope) -> Element { use_router( cx, &|| RouterConfiguration { # synchronous: true, # history: Box::new(MemoryHistory::with_initial_path(\"/invalid\").unwrap()), ..Default::default() }, &|| { Segment::content(comp(Index)).fallback(comp(Fallback)) } ); render! { Outlet { } }\n}\n#\n# let mut vdom = VirtualDom::new(App);\n# vdom.rebuild();\n# assert_eq!(\n# dioxus_ssr::render(&vdom),\n# \"The page you asked for doesn't exist.
\"\n# );","breadcrumbs":"Defining Routes » Fallback Routes (404 page) » A single global fallback","id":"22","title":"A single global fallback"},"23":{"body":"In some cases we might want to show different fallback content depending on what section of our app the user is in. For example, our app might have several settings pages under /settings, such as the password settings /settings/password or the privacy settings /settings/privacy. When our user is in the settings section, we want to show them \"settings not found\" instead of \"page not found\" . We can easily do that by setting a fallback route on our nested Segment . It will then replace the global fallback whenever our Segment was active. Note the .clear_fallback(false) part. If we didn't add this, the fallback content would be rendered inside the Settings component. # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\nuse dioxus::prelude::*;\n# extern crate dioxus_router;\nuse dioxus_router::{history::MemoryHistory, prelude::*};\n# extern crate dioxus_ssr; // This example doesn't show the index or settings components. It only shows how\n// to set up several fallback routes.\n# fn Index(cx: Scope) -> Element { unimplemented!() }\n# fn Settings(cx: Scope) -> Element { unimplemented!() }\n# fn GeneralSettings(cx: Scope) -> Element { unimplemented!() }\n# fn PasswordSettings(cx: Scope) -> Element { unimplemented!() }\n# fn PrivacySettings(cx: Scope) -> Element { unimplemented!() } fn GlobalFallback(cx: Scope) -> Element { render! { h1 { \"Error 404 - Page Not Found\" } }\n} fn SettingsFallback(cx: Scope) -> Element { render! { h1 { \"Error 404 - Settings Not Found\" } }\n} fn App(cx: Scope) -> Element { use_router( cx, &|| RouterConfiguration { # synchronous: true, # history: Box::new(MemoryHistory::with_initial_path(\"/settings/invalid\").unwrap()), ..Default::default() }, &|| { Segment::empty() .fixed(\"settings\", Route::content(comp(Settings)).nested( Segment::content(comp(GeneralSettings)) .fixed(\"password\", comp(PasswordSettings)) .fixed(\"privacy\", comp(PrivacySettings)) .fallback(comp(SettingsFallback)) .clear_fallback(true) )) .fallback(comp(GlobalFallback)) } ); render! { Outlet { } }\n}\n#\n# let mut vdom = VirtualDom::new(App);\n# vdom.rebuild();\n# assert_eq!(\n# dioxus_ssr::render(&vdom),\n# \"some other content
\"\n# );","breadcrumbs":"Defining Routes » Full Code","id":"6","title":"Full Code"},"60":{"body":"Preparing our app for sitemap generation is quite easy. We just need to extract our segment definition into its own function. # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n# extern crate dioxus_ssr;\n# fn Home(cx: Scope) -> Element { unimplemented!() }\n# fn Fixed(cx: Scope) -> Element { unimplemented!() }\n# fn Nested(cx: Scope) -> Element { unimplemented!() }\n# struct ParameterName;\n# fn Parameter(cx: Scope) -> Element { unimplemented!() }\n#\nfn App(cx: Scope) -> Element { use_router( cx, &|| RouterConfiguration { ..Default::default() }, &prepare_routes ); render! { Outlet { } }\n} fn prepare_routes() -> SegmentSome content
\");","breadcrumbs":"Routing Update Callback » Code Example","id":"65","title":"Code Example"},"66":{"body":"In this guide you'll learn to effectively use Dioxus Router whether you're building a small todo app or the next FAANG company. We will create a small website with a blog, homepage, and more! To follow along with the router example, you'll need a working Dioxus app. Check out the Dioxus book to get started. Make sure to add Dioxus Router as a dependency, as explained in the introduction .","breadcrumbs":"Overview » Overview","id":"66","title":"Overview"},"67":{"body":"Create routes and render \"pages\". Utilize nested routes, create a navigation bar, and render content for a set of routes. Gather URL parameters to dynamically display content. Redirect your visitors wherever you want. Disclaimer The example will only display the features of Dioxus Router. It will not include any actual functionality. To keep things simple we will only be using a single file, this is not the recommended way of doing things with a real application. You can find the complete application in the full code chapter.","breadcrumbs":"Overview » You'll learn how to","id":"67","title":"You'll learn how to"},"68":{"body":"In this chapter, we will start utilizing Dioxus Router and add a homepage and a 404 page to our project.","breadcrumbs":"Creating Our First Route » Creating Our First Route","id":"68","title":"Creating Our First Route"},"69":{"body":"Dioxus Router works based on a use_router hook, a route definition in pure rust and Outlet components. If you've ever used Vue Router , you should feel right at home with Dioxus Router. First we need an actual page to route to! Let's add a homepage component: # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n#\nfn Home(cx: Scope) -> Element { render! { h1 { \"Welcome to the Dioxus Blog!\" } }\n}","breadcrumbs":"Creating Our First Route » Fundamentals","id":"69","title":"Fundamentals"},"7":{"body":"When developing bigger applications we often want to nest routes within each other. As an example, we might want to organize a settings menu using this pattern: └ Settings ├ General Settings (displayed when opening the settings) ├ Change Password └ Privacy Settings We might want to map this structure to these paths and components: /settings -> Settings { GeneralSettings }\n/settings/password -> Settings { PWSettings }\n/settings/privacy -> Settings { PrivacySettings } Nested routes allow us to do this.","breadcrumbs":"Defining Routes » Nested Routes » Nested Routes","id":"7","title":"Nested Routes"},"70":{"body":"We want to use Dioxus Router to separate our application into different \"pages\". Dioxus Router will then determine which page to render based on the URL path. To start using Dioxus Router, we need to use the use_router hook. All other hooks and components the router provides can only be used as a descendant of a component calling use_router . The use_router hook takes three arguments: cx, which is a common argument for all hooks. A RouterConfiguration , which allows us to modify its behavior. A definition of all routes the application contains, in the form of its root Segment . # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\nuse dioxus::prelude::*;\n# extern crate dioxus_router;\nuse dioxus_router::prelude::*;\n# fn Home(cx: Scope) -> Element { unimplemented!() } fn App(cx: Scope) -> Element { use_router( cx, &|| RouterConfiguration::default(), &|| Segment::content(comp(Home)) ); render! { Outlet { } }\n} If you head to your application's browser tab, you should now see the text Welcome to Dioxus Blog! when on the root URL (http://localhost:8080/). If you enter a different path for the URL, nothing should be displayed. This is because we told Dioxus Router to render the Home component only when the URL path is /. The index (Segment::content()) functionality we used basically emulates how web servers treat index.html files.","breadcrumbs":"Creating Our First Route » To Route or Not to Route","id":"70","title":"To Route or Not to Route"},"71":{"body":"In our example Dioxus Router doesn't render anything. Many sites also have a \"404\" page for when a URL path leads to nowhere. Dioxus Router can do this too! First, we create a new PageNotFound component. # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n#\nfn PageNotFound(cx: Scope) -> Element { render! { h1 { \"Page not found\" } p { \"We are terribly sorry, but the page you requested doesn't exist.\" } }\n} Now to tell Dioxus Router to render our new component when no route exists. # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n# fn Home(cx: Scope) -> Element { unimplemented!() }\n# fn PageNotFound(cx: Scope) -> Element { unimplemented!() }\n#\nfn App(cx: Scope) -> Element { use_router( cx, &|| RouterConfiguration::default(), &|| { Segment::content(comp(Home)) .fallback(comp(PageNotFound)) // this is new } ); render! { Outlet { } }\n} Now when you go to a route that doesn't exist, you should see the page not found text.","breadcrumbs":"Creating Our First Route » What if a Route Doesn't Exist?","id":"71","title":"What if a Route Doesn't Exist?"},"72":{"body":"In this chapter we learned how to create a route and tell Dioxus Router what component to render when the URL path is /. We also created a 404 page to handle when a route doesn't exist. Next, we'll create the blog portion of our site. We will utilize nested routes and URL parameters.","breadcrumbs":"Creating Our First Route » Conclusion","id":"72","title":"Conclusion"},"73":{"body":"Not a bird's nest! A nest of routes! In this chapter we will begin to build the blog portion of our site which will include links, nested URLs, and URL parameters. We will also explore the use case of rendering components directly in the component calling use_router .","breadcrumbs":"Building a Nest » Building a Nest","id":"73","title":"Building a Nest"},"74":{"body":"Our site visitors won't know all the available pages and blogs on our site so we should provide a navigation bar for them. Let's create a new NavBar component: # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n#\nfn NavBar(cx: Scope) -> Element { render! { nav { ul { } } }\n} Our navbar will be a list of links going between our pages. We could always use an HTML anchor element but that would cause our page to reload unnecessarily. Instead we want to use the Link component provided by Dioxus Router. The Link is similar to a regular a tag. It takes a target (for now a path, more on other targets later) and an element. Let's add our links # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n#\nfn NavBar(cx: Scope) -> Element { render! { nav { ul { // new stuff starts here li { Link { target: NavigationTarget::Internal(String::from(\"/\")), \"Home\" } } li { Link { target: \"/blog\", // short form \"Blog\" } } // new stuff ends here } } }\n} Using this method, the Link component only works for links within our application. To learn more about navigation targets see here . And finally, we add the navbar component in our app component: # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n# fn Home(cx: Scope) -> Element { unimplemented!() }\n# fn NavBar(cx: Scope) -> Element { unimplemented!() }\n# fn PageNotFound(cx: Scope) -> Element { unimplemented!() }\n#\nfn App(cx: Scope) -> Element { use_router( cx, &|| RouterConfiguration::default(), &|| Segment::content(comp(Home)).fallback(comp(PageNotFound)) ); render! { NavBar { } // this is new Outlet { } }\n} Now you should see a list of links near the top of your page. Click on one and you should seamlessly travel between pages.","breadcrumbs":"Building a Nest » Site Navigation","id":"74","title":"Site Navigation"},"75":{"body":"You might want to style links differently, when their page is currently open. To achieve this, we can tell the Link to give its internal a tag a class in that case. # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n#\nfn NavBar(cx: Scope) -> Element { render! { nav { ul { li { Link { target: NavigationTarget::Internal(String::from(\"/\")), active_class: \"active\", // this is new \"Home\" } } li { Link { target: \"/blog\", active_class: \"active\", // this is new \"Blog\" } } } } }\n} This will not be reflected in the full example code .","breadcrumbs":"Building a Nest » Active Link Styling","id":"75","title":"Active Link Styling"},"76":{"body":"Many websites such as GitHub put parameters in their URL. For example, https://github.com/DioxusLabs utilizes the text after the domain to dynamically search and display content about an organization. We want to store our blogs in a database and load them as needed. This'll help prevent our app from being bloated therefor providing faster load times. We also want our users to be able to send people a link to a specific blog post. We could utilize a search page that loads a blog when clicked but then our users won't be able to share our blogs easily. This is where URL parameters come in. The path to our blog will look like /blog/myBlogPage, myBlogPage being the URL parameter. First, lets create a component that wraps around all blog content. This allows us to add a heading that tells the user they are on the blog. # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n#\nfn Blog(cx: Scope) -> Element { render! { h1 { \"Blog\" } Outlet {} }\n} Note the Outlet { } component. For the components of a nested route to be rendered, we need an equally nested outlet. For more details, see the nested routes chapter of the features section. Now we'll create another index component, that'll be displayed when no blog post is selected: # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n#\nfn BlogList(cx: Scope) -> Element { render! { h2 { \"Choose a post\" } ul { li { Link { target: \"/blog/1\", \"Read the first blog post\" } } li { Link { target: \"/blog/2\", \"Read the second blog post\" } } } }\n} We also need to create a component that displays an actual blog post. Within this component we can use the use_route hook to gain access to our URL parameters: # // Hidden lines (like this one) make the documentation tests work.\n# extern crate dioxus;\n# use dioxus::prelude::*;\n# extern crate dioxus_router;\n# use dioxus_router::prelude::*;\n#\nstruct PostId; fn BlogPost(cx: Scope) -> Element { let route = use_route(cx).unwrap(); let post_id = route.parameter::