Trigger redirection / navigation among Dioxus routes

[Tartopoms]

Edit -> Best solution: #1643 (comment)

For a project, I needed to trigger redirection upon a user action among my route. I haven't found a way to do so easily with Dioxus.
use_router_internal(cx) and RouterContext methods are pub(crate) so I can't use them to easyly build a prop.
I went with a solution, I want to share it here for anyone who would have a similar need.

I would be glad to take any fix or recommendation for this piece of code :)

Content:

1. How to use
2. Example
3. Prop

How to use
It works in 3 steps:

1. Edit Navigation enum to add your routes in the impl Navigation fn route(&self)
2. Add a NavigateTo { to: Navigation::_ } prop into your rsx! block
3. In the same "render", call Navigation::_.triger() to navigate to the corresponding route

Example
Here's an example of its use with a form.

I stored the "current" Navigation enum in a use_state().
When one of the two submit button is pressed, the form processes inputs
The form then redirects to the corresponding route as a <form "action"> would do

use dioxus::prelude::*;
use dioxus_router::prelude::*;
use web_sys::wasm_bindgen::JsCast;

#[derive(Clone, Routable)]
enum Route {
    #[route("/")]
    Index {},
    #[route("/open")]
    Open {},
    #[route("/delete")]
    Delete {},
}

fn App(cx: Scope) -> Element {
    render! {
        Router::<Route> {}
    }
}

#[inline_props]
fn Index(cx: Scope) -> Element {
    let form_action = use_state(cx, || Navigation::Open);
    render! {
        form {
            onsubmit: |evt| {
                // process inputs
                form_action.get().trigger();
            },
            div {
                input { r#type: "radio", id: "a", "A" }
                input { r#type: "radio", id: "b", "B" }
            }
            input { r#type: "password", name: "psw", }
        
            NavigateTo { to: Navigation::Open }
            input {
                r#type: "submit",
                value: "Open",
                onclick: |evt| form_action.set(Navigation::Open),
            }
                
            NavigateTo { to: Navigation::Delete }
            input {
                r#type: "submit",
                value: "Delete",
                onclick: |evt| form_action.set(Navigation::Delete),
            }
        }
    }
}

#[inline_props]
fn Open(cx: Scope) -> Element { ... }

#[inline_props]
fn Delete(cx: Scope) -> Element { ... }

Prop

You can use the class: "navigation-link" for CSS display: none, since hidden isnt available for Link {}

use web_sys::wasm_bindgen::JsCast;

#[derive(PartialEq, Props)]
pub struct NavigateToProp {
    to: Navigation,
}
/// A prop that can be triggered to navigate to another route
/// # Example
/// ```rust
/// // see above
/// ```
pub fn NavigateTo(cx: Scope<NavigateToProp>) -> Element {
    cx.render(rsx!(
        Link { to: cx.props.to.route(), id: cx.props.to.id() }
    ))
}

/// Each variant represent one path you would wish to navigate to.
/// For each variant you need to edit route() function.
#[derive(Clone, PartialEq)]
pub enum Navigation {
    Open,
    Delete,
}
impl Navigation {
    /// Return corresponding Route
    fn route(&self) -> Route {
        match self {
            Navigation::Open=> Route::Open{},
            Navigation::Delete=> Route::Delete{},
        }
    }
    /// Return link id
    fn id(&self) -> &'static str {
        let id = format!("link_{}", self.route().to_string());
        Box::leak(id.into_boxed_str())
    }
    /// Get the link by its id and trigger click mouse event with web-sys
    fn trigger(&self) {
        let id = self.id();
        let window = match web_sys::window() {
            Some(windows) => windows,
            None => {
                log::error!("global window does not exists");
                return
            }
        };
        let document = match window.document() {
            Some(document) => document,
            None => {
                log::error!("expecting a document on window");
                return
            }
        };
        let link = match document.get_element_by_id(&id) {
            Some(document) => document,
            None => {
                log::error!("Element with id: {id:?} not found");
                return
            }
        };
        let link = match link.dyn_into::<web_sys::HtmlElement>() {
            Ok(dyn_link) => dyn_link,
            Err(_link) => {
                log::error!("Performs a dynamic cast (checked at runtime) of the link with id: {id:?}");
                return
            }
        };
        link.click();
    }
}

[Tartopoms]

One issue I am still encountering is the onlaod event not working for me:

#[inline_props]
pub fn Index(cx: Scope) -> Element {
    if condition {
        return render! {
            "Redirecting ..."
            NavigateTo { to: Navigation::ActionMenu }
            img { 
                onload: move |_| {
                    log::debug!("onlaod triggered");
                    Navigation::ActionMenu.trigger()
                }
            }
        }
    } else {
        cx.render(rsx!(...))
    }
}```

[ealmloff]

You can navigate to a specific route as defined in this section of the guide: https://dioxuslabs.com/learn/0.4/router/reference/navigation/programmatic. use_navigator just provides a nicer interface over use_router_internal.

I think the load event is never triggering on you image because there is no source set that would start loading

[Tartopoms]

Thank you @ealmloff, it's all may bad for not finding it.
I stopped at this page: Navigation Targets and thought it wasn't implemented.

However, I saw you fixed the onload event, but in my previous example, my log was never triggered, nor I saw it printed in the browser console pannel.

[ealmloff]

However, I saw you #1010 (comment) the onload event, but in my previous example, my log was never triggered, nor I saw it printed in the browser console pannel.

That is because you don't load anything in the img element you create. This doesn't trigger the onload event because there is no image to load:

img {
    onload: move |_| {
        panic!()
    }
}

But this will trigger because there is an image to set:

img {
    src: "https://avatars.githubusercontent.com/u/66571940?v=4", 
    onload: move |_| {
        panic!()
    }
}

[Tartopoms]

Again, may bad, I haven't noticed you already mention the img issue in your first comment.

I understand about the src attribute, however I work on an offline workspace and have trouble referring to custom assets/resources.

My favicon.ico, index.html and sample.jpg are correctly created in the project/dist/ folder alongside the project/dist/assets/, but I dont see them on my browser Source pannel.

See my Dioxus.toml file below.

I want to precise that I create my project with a cargo new --bin client --vcs none. The project is part of a parent cargo workspace, see Cargo.toml below.

I also want to highlight the following:

• I have this warning when running dx serve: [WARN] failed to parse name custom section Invalid name type (at offset 62352993)
• the index_on_404 is set to false even though I set it to true.
  • When I remove my Dioxus.html, the default config has URL Rewrite [index_on_404] : True
• The CSS file isn't found when indicated in Dioxus.toml, I'm getting an 404 not found in the browser Console pannel. So instead I use the style { include_str!("..") } prop

Cargo.toml

[workspace]
members = ["server", "shared", "client" ]
resolver = "2"

Dioxus.toml

[application]
# App (Project) Name / dioxus project name
name = "client"
default_platform = "web"
out_dir = "dist"
# resource (static) file folder
asset_dir = "public"

[web.app]
# HTML title tag content
title = "HSM client"

[web.watcher]
# when watcher trigger, regenerate the `index.html`
reload_html = true
# which files or dirs will be watcher monitoring
watch_path = ["src", "public", "Dioxus.toml"]

# include `assets` in web platform
[web.resource]
# style = ["./public/style.css"]
# script = []
index_on_404 = true

[web.resource.dev]
# Javascript code file
# serve: [dev-server] only
# script = []

# [[web.proxy]]
backend = "http://localhost:8081/api/"

[application.tools]
# use binaryen.wasm-opt for output Wasm file
# binaryen just will trigger in `web` platform
binaryen = { wasm_opt = true }

[ealmloff]

Again, may bad, I haven't noticed you already mention the img issue in your first comment.

I understand about the src attribute, however I work on an online workspace and have trouble referring to custom assets/resources.

My favicon.ico, index.html and sample.jpg are correctly created in the project/dist/ folder alongside the project/dist/assets/, but I dont see them on my browser Source pannel.

See my Dioxus.toml file below.

I want to precise that I create my project with a cargo new --bin client --vcs none. The project is part of a parent cargo workspace, see Cargo.toml below.

I also want to highlight the following:

• I have this warning when running dx serve: [WARN] failed to parse name custom section Invalid name type (at offset 62352993)

You can ignore that error. That is just an extra metadata section the browser doesn't use.

• the index_on_404 is set to false even though I set it to true.

index_on needs to be in the [web.watcher] section, not the [web.resource] section.

• When I remove my Dioxus.html, default config use have URL Rewrite [index_on_404] : True
• The CSS file isn't found when indicated in Dioxus.toml, I'm getting an 404 not found in the browser Console pannel. So instead I use the style { include_str!("..") } prop

That seems like the issue in #1171. The string is where the asset is hosted inside of the public directory. In your case I think it should be style = ["/style.css"]

I am working on a much better system of linking assets in #1369 that abstracts away the final hosted location. It also handles optimizing assets and collecting assets like images and styles from any dependancies that require them.