Query

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 ?).

#![allow(unused)]
fn main() {
// Hidden lines (like this one) make the documentation tests work.
extern crate dioxus;
use dioxus::prelude::*;
extern crate dioxus_router;
use dioxus_router::prelude::*;

fn SomeComponent(cx: Scope) -> Element {
    let route = use_route(cx).expect("nested in Router");

    let query = route.query.clone().unwrap();

    // ...
    unimplemented!()
}
}

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.

#![allow(unused)]
fn main() {
// Hidden lines (like this one) make the documentation tests work.
extern crate dioxus;
use dioxus::prelude::*;
extern crate dioxus_router;
use dioxus_router::prelude::*;

fn SomeComponent(cx: Scope) -> Element {
    render! {
        Link {
            target: NavigationTarget::Internal("/some/path?query=yes".into()),
            "Internal target"
        }
        Link {
            target: NavigationTarget::External("https://dioxuslab.com?query=yes".into()),
            "External target"
        }
    }
}
}

Named

When using named navigation we can pass the query via a function.

#![allow(unused)]
fn main() {
// Hidden lines (like this one) make the documentation tests work.
extern crate dioxus;
use dioxus::prelude::*;
extern crate dioxus_router;
use dioxus_router::prelude::*;
struct Target;

fn SomeComponent(cx: Scope) -> Element {
    render! {
        Link {
            target: named::<Target>().query("query=yes"),
            "Query String"
        }
        Link {
            target: named::<Target>().query(vec![("query", "yes")]),
            "Query Vec"
        }
    }
}
}