1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

//! # Native Router
//!
//! Even though Freya supports Dioxus Router, there are certain integrations that it does not provide, such as as back and forward navigation with the mouse buttons.
//! For things like this exists `NativeRouter`, a thin wrapper component that adds these missing integrations.
//!
//! You simply need to wrap your `Router` content inside the `NativeRouter` component.
//!
//! Example (based on the example from [router](crate::_docs::router)):
//! ```rust, no_run
//! # use freya::prelude::*;
//! # use dioxus_router::prelude::*;
//! # use freya_components::Link;
//! # #[allow(non_snake_case)]
//! fn AppSidebar() -> Element {
//!     rsx!(
//!         NativeRouter {
//!             Body {
//!                 Link {
//!                     to: Route::Home,
//!                     label {
//!                         "Home"
//!                     }
//!                 },
//!                 Link {
//!                     to: Route::Other,
//!                     label {
//!                         "Other"
//!                     }
//!                 },
//!                 // Rest of app
//!             }
//!         }
//!     )
//! }
//!   #[rustfmt::skip]
//!   #[derive(Routable, Clone, PartialEq)]
//! # pub enum Route {
//! #     #[layout(AppSidebar)]
//! #         #[route("/")]
//! #         Home,
//! #         #[route("/other")]
//! #         Other,
//! #     #[end_layout]
//! #     #[route("/..route")]
//! #     PageNotFound { }, // Handle 404 routes.
//! # }
//! #
//! # #[component]
//! # fn Home() -> Element {
//! #     rsx!(
//! #         label {
//! #             "Home Page"
//! #         }
//! #     )
//! # }
//! #
//! # #[component]
//! # fn Other() -> Element {
//! #     rsx!(
//! #         label {
//! #             "Other Page"
//! #         }
//! #     )
//! # }
//! #
//! # #[component]
//! # fn PageNotFound() -> Element {
//! #     rsx!(
//! #         label {
//! #             "404"
//! #         }
//! #     )
//! # }
//! ```