Switch page by calling method? #3279

hash1018 · 2023-05-31T16:12:56Z

hash1018
May 31, 2023

Hi, I'm a newbie for yew. I am studying and developing front-end with yew and there is a problem that sticks in my mind.

I have a App Component which is a main page ( localhost:8080/ ) and there are one login button and input.
When login button is clicked, the message goes to update method then I want to do something such as checking login validation.
If login process is success, I want to swtich page called "workspace" ( localhost:8080/workspace ) and the workspace component is already prepared.

I don't know how to do it. Please help me.

use yew::html;
use yew::prelude::*;
use yew_router::prelude::*;

use crate::pages::workspace::Workspace;

mod pages;

#[derive(Clone, Routable, PartialEq)]
enum Route {
    #[at("/")]
    Home,
    #[at("/workspace")]
    Workspace,
}

fn switch(routes: Route) -> Html {
    match routes {
        Route::Home => {
            html! { <App /> }
        }
        Route::Workspace => {
            html! { <Workspace /> }
        }
    }
}

pub enum Message {
    LoginButtonClicked,
}

pub struct App {}

impl Component for App {
    type Message = Message;
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self {}
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Message::LoginButtonClicked => {
                **//called by login button.
                //and do something then switch page to Workspace.
                //From here how can I switch page?**
            }
        }
        true
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let login_button_clicked = ctx.link().callback(|_| Message::LoginButtonClicked);

        html!(
            <body>
                <div class="center">
                    <input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username" />
                    <button onclick={login_button_clicked}> {"Login"} </button>
                </div>
            </body>
        )
    }
}

fn main() {
    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
    console_error_panic_hook::set_once();
    yew::Renderer::<App>::new().render();
}

///////////////////////////////////////////////////////////////////////////////////
workspace.rs 

use yew::{html, Component};

pub struct Workspace {}

impl Component for Workspace {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &yew::Context<Self>) -> Self {
        Workspace {}
    }

    fn update(&mut self, _ctx: &yew::Context<Self>, _msg: Self::Message) -> bool {
        true
    }

    fn view(&self, _ctx: &yew::Context<Self>) -> yew::Html {
        html! {
            <body> { "Hello workspace" } </body>
        }
    }
}

Answered by jq170727

May 31, 2023

I had a similar question a while back. I suspect you need a <BrowserRouter>.
There is an example in the docs for https://docs.rs/yew-router/latest/yew_router
Here is what I did - https://github.com/jq170727/change_yew_route_from_js/blob/main/src/main.rs#L70

View full answer

jq170727 · 2023-05-31T18:37:04Z

jq170727
May 31, 2023

I had a similar question a while back. I suspect you need a <BrowserRouter>.
There is an example in the docs for https://docs.rs/yew-router/latest/yew_router
Here is what I did - https://github.com/jq170727/change_yew_route_from_js/blob/main/src/main.rs#L70

0 replies

hash1018 · 2023-05-31T23:27:04Z

hash1018
May 31, 2023
Author

Thank you it was helpful. I implemented exaclty what i want.

Full code

use yew::html;
use yew::html::Scope;
use yew::prelude::*;
use yew_router::prelude::*;

use crate::pages::workspace::Workspace;

mod pages;

#[derive(Clone, Routable, PartialEq)]
enum Route {
    #[at("/")]
    Login,
    #[at("/workspace")]
    Workspace,
}

fn switch(routes: Route) -> Html {
    match routes {
        Route::Login => {
            html! { <Login /> }
        }
        Route::Workspace => {
            html! { <Workspace /> }
        }
    }
}

pub enum Message {
    LoginButtonClicked,
}

pub struct Login {}

impl Component for Login {
    type Message = Message;
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self {}
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Message::LoginButtonClicked => {
                let navigator = ctx.link().navigator().unwrap();
                navigator.push(&Route::Workspace);
            }
        }
        true
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html!({ self.view_navi(ctx.link()) })
    }
}

impl Login {
    fn view_navi(&self, link: &Scope<Self>) -> Html {
        let login_button_clicked = link.callback(|_| Message::LoginButtonClicked);

        html!(
            <body>
                <div class="center">
                    <input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username" />
                    <button onclick={login_button_clicked}> {"Login"} </button>
                </div>
            </body>
        )
    }
}

#[function_component(Main)]
fn app() -> Html {
    html! {
        <BrowserRouter>
            <Switch<Route> render={switch} />
        </BrowserRouter>
    }
}

fn main() {
    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
    console_error_panic_hook::set_once();
    yew::Renderer::<Main>::new().render();
}

1 reply

jq170727 May 31, 2023

Excellent!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch page by calling method? #3279

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Switch page by calling method? #3279

hash1018 May 31, 2023

Replies: 2 comments · 1 reply

jq170727 May 31, 2023

hash1018 May 31, 2023 Author

jq170727 May 31, 2023

hash1018
May 31, 2023

Replies: 2 comments 1 reply

jq170727
May 31, 2023

hash1018
May 31, 2023
Author