use_navigate or expect_context::<Store<T>> cannot be used under island #3601
-
|
The |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 9 replies
-
|
Hard to tell without seeing your code, but you want to keep in mind that the context on the server is not copied to the client, so if you use it in an island that can panic. If you want to pass data to an island, you’d need to use a Resource
…On Wed, Feb 12, 2025, at 10:13 PM, tqq1994516 wrote:
The `use_navigate` function or the `expect_context::<Store<T>>` function cannot be used under the island, and the compilation is normal, but the console error message is `Uncaught RuntimeError: unreachable` when the frontend loads wasm.
image.png (view on web) <https://github.com/user-attachments/assets/5c347d28-d1de-44ee-9ca2-8c84a504c058>
This is the front-end not interactive, and if I comment this part of the code everything works.
—
Reply to this email directly, view it on GitHub <#3601>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABVBTCLNOSL273DMEIQLOJD2PQZZ5AVCNFSM6AAAAABXBK6PGGVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZXHE2TSNJYHE>.
You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
I'm adding some global state to the root #[derive(Clone, Debug, Default, Store)]
pub struct GlobalState {
pub logged: bool,
}
pub fn shell(options: LeptosOptions) -> impl IntoView {
view! {
<ssr::SSRMountStyleProvider>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<AutoReload options=options.clone() />
<HydrationScripts options=options islands=true/>
<MetaTags/>
</head>
<body>
<App/>
</body>
</html>
</ssr::SSRMountStyleProvider>
}
}
#[component]
pub fn App() -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context();
provide_context(Store::new(GlobalState { logged: false }));
view! {
// injects a stylesheet into the document <head>
// id=leptos means cargo-leptos will hot-reload this stylesheet
<Stylesheet id="leptos" href="/pkg/sinapis.css"/>
// sets the document title
<Title text="Welcome to Leptos"/>
// content for this welcome page
<ConfigProvider>
<Router>
<main>
<Routes fallback=|| "Page not found.".into_view()>
<Route path=path!("") view=HomePage/>
<Route path=path!("/forbidden") view=|| "forbidden".into_view() />
</Routes>
</main>
</Router>
</ConfigProvider>
}
}
#[component]
fn HomePage() -> impl IntoView {
view! {
<h1>"Welcome to Leptos!"</h1>
<UserController />
}
}
#[island]
fn UserController() -> impl IntoView {
let global_state = expect_context::<Store<GlobalState>>();
let navigate = use_navigate();
let on_login = move |_| {
global_state.logged().set(!global_state.logged().get());
if !global_state.logged().get() {
navigate("/forbidden", Default::default())
}
};
view! {
<button on:click=on_login>{move || global_state.logged().get()}</button>
}
}The |
Beta Was this translation helpful? Give feedback.
-
|
Context: Because your context is provided in the
|
Beta Was this translation helpful? Give feedback.
-
I roughly know how to correct my mistake. Thank you.
Thanks, I see, the current sample code is actually to demonstrate the function of patchwork, and the formal code I think should be judged according to the form submission to judge the route, I mainly want to achieve the effect of similar to the guardian route, such as submitting the form after the logical verification, after passing to the target page, otherwise do not go or go to the error page, I don't know if there is a better pattern in the framework that I haven't noticed. In addition to route guards, I may also need page lifecycle hooks to implement some specific functions at different stages. Also, where can I see some detailed information about the limitations in island mode, and I can't quickly locate the error message of the existing console. |
Beta Was this translation helpful? Give feedback.
-
|
If I were using islands, I would probably use the
Not sure what this means, sorry.
There isn't really a list of limitations anywhere: understanding the limitations of islands mostly means understanding what islands do and how using islands/partial hydration is different from using not-islands/full-page hydration, and then thinking through the implications. "Islands mode" really just means "only the things with
Not sure what this means either, sorry. |
Beta Was this translation helpful? Give feedback.
-
Thanks for your answer, I will try to use it. |
Beta Was this translation helpful? Give feedback.
-
Well, I should be a little confused about this. Effect is similar to the react function component, and it should not require the ability to be similar to the class component, such as https://react.dev/reference/react/Component#componentdidupdate-caveats |
Beta Was this translation helpful? Give feedback.
-
I mean, the two errors I encountered with this problem were after seeing the error report like the screenshot above in my browser console, and then commenting the code step by step to get the cause of the error. This debugging method is too indirect and easy to discourage |
Beta Was this translation helpful? Give feedback.
-
|
Ah right. It looks like this is the raw |
Beta Was this translation helpful? Give feedback.
If I were using islands, I would probably use the
ProtectedRoutecomponent for any protected routes and let the question of whether it's authorized or not be handled on the server. In general, the "islands" approach is about moving things back toward a more traditional multi-page/server-rendered application, while making it easy to opt into small interactive portions of the page. This is why, for example, the entire router isn't shipped to the client — once you enable client-side routing you pretty much need to compile all of every page into the WASM binary, which is what islands are trying to avoid. Since you'll need to go back to the server while navigating anyway, it usually makes the …