update the router guide

docs/router/src/reference/failures/index.md

@@ -34,7 +34,7 @@ You can override it by setting the `failure_external_navigation` value of the
 [`RouterConfiguration`]. The external URL will be provided via the
 [`FailureExternalNavigation`] parameter.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;

docs/router/src/reference/history-buttons.md

@@ -14,7 +14,7 @@ forward buttons:
 > If you want to navigate through the history programmatically, take a look at
 > [`programmatic navigation`](./navigation/programmatic.md).
 
-```rust, no_run
+```rust, no_run, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;

docs/router/src/reference/history-providers.md

@@ -15,7 +15,7 @@ By default the router uses the [`MemoryHistory`]. It might be changed to use
 
 You can override the default history:
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;

docs/router/src/reference/index.md

@@ -11,7 +11,7 @@ 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
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;

docs/router/src/reference/navigation/external.md

@@ -15,7 +15,8 @@ the [`Link`] component is more convenient to use, as it automatically sets the
 `rel` attribute for the link, when the target is external.
 
 ## Code Example
-```rust
+
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;

docs/router/src/reference/navigation/index.md

@@ -9,6 +9,7 @@ like this:
 ```
 
 However, we cannot do that when using the router for two reasons:
+
 1. Anchor tags make the browser load a new page from the server. This takes a
    lot of time, and it is much faster to let the router handle the navigation
    client-side.
@@ -17,7 +18,8 @@ However, we cannot do that when using the router for two reasons:
 
 To solve these problems, the router provides us with a [`Link`] component we can
 use like this:
-```rust,no_run
+
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -40,6 +42,7 @@ fn SomeComponent(cx: Scope) -> Element {
 The `target` in the example above is similar to the `href` of a regular anchor
 element. However, it tells the router more about what kind of navigation it
 should perform:
+
 - The example uses [`Internal`]. We give it an arbitrary path that will be
   merged with the current URL.
 - [`Named`] allows us to navigate within our app using predefined names.

docs/router/src/reference/navigation/name.md

@@ -11,6 +11,7 @@ automatically create the actual path to navigate to, even inserting required
 parameters.
 
 _Named_ navigation has a few advantages over _path-based_ navigation:
+
 - Links can be created without knowing the actual path.
 - It is much easier to find all links to a specific route.
 - The router knows what links are invalid (and will panic in debug builds).
@@ -27,7 +28,8 @@ _Named_ navigation has a few advantages over _path-based_ navigation:
 > certain conditions. None of these names can be used for app defined routes.
 
 ## Code Example
-```rust
+
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;
@@ -90,11 +92,12 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## Check if a name is present
+
 You can check if a specific name is present for the current route. This works
 similar to getting the value of a [parameter route](../routes/parameter.md) and
 the same restrictions apply.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;

docs/router/src/reference/navigation/programmatic.md

@@ -4,10 +4,11 @@ Sometimes we want our application to navigate to another page without having the
 user click on a link. This is called programmatic navigation.
 
 ## Acquiring a [`Navigator`]
+
 To use programmatic navigation, we first have to acquire a [`Navigator`]. For
 that purpose we can use the [`use_navigate`] hook.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;
@@ -23,7 +24,9 @@ fn Content(cx: Scope) -> Element {
 ```
 
 ## Triggering a Navigation
+
 We can use the [`Navigator`] to trigger four different kinds of navigation:
+
 - `push` will navigate to the target. It works like a regular anchor tag.
 - `replace` works like `push`, except that it replaces the current history entry
   instead of adding a new one. This means the prior page cannot be restored with
@@ -32,7 +35,7 @@ We can use the [`Navigator`] to trigger four different kinds of navigation:
 - `Go forward` works like the browsers forward button (the opposite of the back
   button).
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -64,6 +67,7 @@ You might have noticed that, like [`Link`], the [`Navigator`]s `push` and
 [`Internal`], [`Named`] and [`External`].
 
 ## External Navigation Targets
+
 Unlike a [`Link`], the [`Navigator`] cannot rely on the browser (or webview) to
 handle navigation to external targets via a generated anchor element.
 

docs/router/src/reference/outlets.md

@@ -3,7 +3,7 @@
 [`Outlet`]s tell the router where to render content. In the following example
 the active routes content will be rendered within the [`Outlet`].
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -45,24 +45,21 @@ fn App(cx: Scope) -> Element {
 
 The example above will output the following HTML (line breaks added for
 readability):
+
 ```html
-<header>
-    header
-</header>
-<h1>
-    Index
-</h1>
-<footer>
-    footer
-</footer>
+<header>header</header>
+<h1>Index</h1>
+<footer>footer</footer>
 ```
 
 ## Nested Outlets
+
 When using nested routes, we need to provide equally nested [`Outlet`]s.
 
 > Learn more about [nested routes](./routes/nested.md) in their own chapter.
 
 ## Named Outlets
+
 When building complex apps, we often need to display multiple pieces of content
 simultaneously. For example, we might have a sidebar that changes its content in
 sync with the main part of the page.
@@ -74,7 +71,7 @@ tell the router about our content.
 We then can use a named [`Outlet`] in our output, to tell the router where to
 put the side content.
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -127,23 +124,21 @@ fn App(cx: Scope) -> Element {
 
 The example above will output the following HTML (line breaks added for
 readability):
+
 ```html
-<main>
-    Main Content
-</main>
-<aside>
-    Side Content
-</aside>
+<main>Main Content</main>
+<aside>Side Content</aside>
 ```
 
 ## Outlet depth override
+
 When nesting [`Outlet`]s, they communicate with each other. This allows the
 nested [`Outlet`] to render the content of the nested route.
 
 We can override the detected value. Be careful when doing so, it is incredibly
 easy to create an unterminated recursion. See below for an example of that.
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -197,17 +192,17 @@ fn App(cx: Scope) -> Element {
 
 The example above will output the following HTML (line breaks added for
 readability):
+
 ```html
-<h2>
-    Nested
-</h2>
+<h2>Nested</h2>
 ```
 
 ### Outlet recursion
+
 This code will create a crash due to an unterminated recursion using
 [`Outlet`]s.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;

docs/router/src/reference/query.md

@@ -4,11 +4,12 @@ Some apps use the query part of the URL to encode information. The router allows
 you to easily access the query, as well as set it when navigating.
 
 ## Accessing the query
+
 The [`use_route`] hook allows us to access the current query in two ways. The
 returned `struct` contains a `query` field, that contains the query (without the
 leading `?`).
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;
@@ -26,13 +27,15 @@ fn SomeComponent(cx: Scope) -> Element {
 ```
 
 ## Setting the query
+
 When navigating we can tell the router to change the query. However, the method
 we use to do this is very different, depending on how we specify our target.
 
 ### [`Internal`] and [`External`]
+
 When using [`Internal`] or [`External`] we have to append our query manually.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -54,10 +57,11 @@ fn SomeComponent(cx: Scope) -> Element {
 ```
 
 ### [`Named`]
+
 When using [named navigation](./navigation/name.md) we can pass the query via
 a function.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;

docs/router/src/reference/routes/catch_all.md

@@ -10,6 +10,7 @@ functionality with catch all routes.
 > The parameter will be URL decoded.
 
 ## Creating a content component
+
 We start by creating a component that uses the parameters value.
 
 We can get the current state of the router using the [`use_route`] hook. From
@@ -23,7 +24,7 @@ will later also define on our route.
 > The [`use_route`] hook can only be used in components nested within a
 > component that called [`use_router`].
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;
@@ -45,6 +46,7 @@ fn Greeting(cx: Scope) -> Element {
 ```
 
 ## Defining the routes
+
 Now we can define our route. Unlike a fixed [`Route`], a [`ParameterRoute`]
 needs two arguments to be created.
 
@@ -54,7 +56,7 @@ needs two arguments to be created.
 > For that reason, the example below would not work in practice, but showing
 > both forms (explicit and short) is more important for this example.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -83,6 +85,7 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## Interaction with other routes
+
 Each individual [`Segment`] can only ever have one active route. This means that
 when a [`Segment`] has more than just a catch all route, the router has to
 decide which is active. It does that this way:
@@ -105,11 +108,13 @@ by the path, i.e. `//`.
 >
 > If you absolutely need an empty parameter on the root [`Segment`], a URL like
 > this _could_ work:
+>
 > - `https://your-site.example//` for web sites
 > - `dioxus://index.html//` for desktop apps
 
 ## Full Code
-```rust
+
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;

docs/router/src/reference/routes/fallback.md

@@ -8,10 +8,11 @@ Fallback routes allow us to do that.
 > path, like web apps running in the browser.
 
 ## A single global fallback
+
 To catch all cases of invalid paths within our app, we can simply add a fallback
 route to our root [`Segment`].
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;
@@ -59,6 +60,7 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## More specific fallback routes
+
 In some cases we might want to show different fallback content depending on what
 section of our app the user is in.
 
@@ -73,7 +75,7 @@ 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.
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;

docs/router/src/reference/routes/index.md

@@ -4,10 +4,11 @@ When creating a router we need to pass it a [`Segment`]. It tells the router
 about all the routes of our app.
 
 ## Example content
+
 To get a good understanding of how we define routes we first need to prepare
 some example content, so we can see the routing in action.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;
@@ -28,6 +29,7 @@ fn Other(cx: Scope) -> Element {
 ```
 
 ## Index routes
+
 The easiest thing to do is to define an index route.
 
 Index routes act very similar to `index.html` files in most web servers. They
@@ -36,7 +38,7 @@ are active, when we don't specify a route.
 > Note that we wrap our `Index` component with [`comp`]. This is because of
 > rust type system requirements.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -59,6 +61,7 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## Fixed routes
+
 It is almost as easy to define a fixed route.
 
 Fixed routes work similar to how web servers treat files. They are active, when
@@ -66,7 +69,7 @@ specified in the path. In the example, the path must be `/other`.
 
 > The path will be URL decoded before checking if it matches our route.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -91,7 +94,8 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## Full Code
-```rust
+
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;

docs/router/src/reference/routes/matching.md

@@ -14,10 +14,11 @@ _Matching_ routes make it easy to implement such behavior.
 > unfit for all other purposes.
 
 ## Code Example
+
 > Notice that the parameter of a _matching route_ has the same type as a
 > [_catch all route_](./catch_all.md).
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -112,6 +113,7 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## Matcher
+
 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.
@@ -119,7 +121,7 @@ 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:
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus_router;
 # use dioxus_router::prelude::*;

docs/router/src/reference/routes/multiple-and-redirect.md

@@ -1,11 +1,13 @@
 # Multiple Components & Redirects
 
 ## Multiple Components
+
 When creating complex apps we sometimes want to have multiple pieces of content
 side by side. The router allows us to do this. For more details see the section
 about [named `Outlet`s](../outlets.md#named-outlets).
 
 ## Redirects
+
 In some cases we may want to redirect our users to another page whenever they
 open a specific path. We can tell the router to do this when defining our
 routes.
@@ -16,7 +18,7 @@ routes.
 In the following example we will redirect everybody from `/` and `/start` to
 `/home`.
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;

docs/router/src/reference/routes/nested.md

@@ -22,6 +22,7 @@ We might want to map this structure to these paths and components:
 Nested routes allow us to do this.
 
 ## Route Depth
+
 With nesting routes, the router manages content on multiple levels. In our
 example, when the path is `/settings`, there are two levels of content:
 
@@ -34,13 +35,14 @@ content of nested routes to actually be rendered, we also need nested
 [`Outlet`]s.
 
 ## Defining the content components
+
 We start by creating the components we want the router to render.
 
 Take a look at the `Settings` component. When it gets rendered by an [`Outlet`],
 it will render a second [`Outlet`]. Thus the second [`Outlet`] is nested within
 the first one, and will in turn render our nested content.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -74,13 +76,14 @@ fn PrivacySettings(cx: Scope) -> Element {
 ```
 
 ## Defining the root [`Segment`]
+
 Now we create the [`Segment`] that we will pass to the router.
 
 Note that we wrap `comp(Settings)` within a [`Route`]. For this exact code that
 is unnecessary, as this would be done automatically. However, in the next step
 we'll use a method of [`Route`], so we might as well add this now.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -103,6 +106,7 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## Defining the nested [`Segment`]
+
 In order to create nested routes we need to create a nested [`Segment`]. We then
 pass it to the [`Route`] on the root segment.
 
@@ -110,7 +114,7 @@ pass it to the [`Route`] on the root segment.
 >
 > https://router.example/`root_segment`/`first_nested_segment`/`second_nested_segment`/...
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -143,7 +147,8 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## Full Code
-```rust
+
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;

docs/router/src/reference/routing-update-callback.md

@@ -4,6 +4,7 @@ In some cases we might want to run custom code when the current route changes.
 For this reason, the [`RouterConfiguration`] exposes an `on_update` field.
 
 ## How does the callback behave?
+
 The `on_update` is called whenever the current routing information changes. It
 is called after the router updated its internal state, but before depended
 components and hooks are updated.
@@ -19,7 +20,8 @@ initiated the navigation, was found as a redirect target or returned by the
 `on_update` itself.
 
 ## Code Example
-```rust
+
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # extern crate dioxus_router;

docs/router/src/reference/sitemap-generation.md

@@ -5,8 +5,10 @@ generating all pages), Dioxus Router provides functions to extract that
 information from a [`Segment`].
 
 ## Preparing an app
+
 We will start by preparing an app with some routes like we normally would.
-```rust
+
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 use dioxus::prelude::*;
@@ -74,10 +76,11 @@ fn App(cx: Scope) -> Element {
 ```
 
 ## Modifying the app to make using sitemaps easier
+
 Preparing our app for sitemap generation is quite easy. We just need to extract
 our segment definition into its own function.
 
-```rust,no_run
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -117,13 +120,14 @@ fn prepare_routes() -> Segment<Component> {
 ```
 
 ## Sitemaps with parameter names
+
 The first variant to generate sitemaps is very simple. It finds all routes
 within the [`Segment`] and adds them to the returned `Vec`.
 
 Matching and parameter routes are represented by their `key`, prefixed with `\`.
 Besides that `\`, all paths are URL encoded.
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 # extern crate dioxus;
 # use dioxus::prelude::*;
@@ -161,6 +165,7 @@ assert_eq!(sitemap, expected);
 ```
 
 ## Sitemaps with actual parameter values
+
 The second variant to generate sitemaps is a bit more involved. When it
 encounters a parameter route, it inserts all values with a matching `key` that
 were provided to it.
@@ -169,7 +174,7 @@ Matching routes only add their path if the value matches their regex.
 
 All paths are URL encoded.
 
-```rust
+```rust, no_run
 # // Hidden lines (like this one) make the documentation tests work.
 use std::collections::{BTreeMap, HashSet};
 # extern crate dioxus;