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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

//! # Router
//!
//! Freya supports the official [Dioxus Router](https://docs.rs/dioxus-router/latest/dioxus_router/), which means you can declare different pages for your app. The only difference is that you will need to use Freya's custom `Link` component.
//!
//! ### Example
//!
//! ```rust
//! # use freya::prelude::*;
//! # use dioxus_router::prelude::{
//! #    Outlet,
//! #    Routable,
//! #    Router,
//! # };
//! fn app() -> Element {
//!     /// We place the router renderer in the root component
//!     rsx!(Router::<Route> {})
//! }
//!
//! // Declare your Routes tree as an enum
//! // Every route must have a component with the same name
//! // So for example, `Home` needs to have a `fn Home(...` component
//! // the `Routable` macro will pick it up automatically
//! // so it must be in the scope.
//! #[derive(Routable, Clone, PartialEq)]
//! #[rustfmt::skip]
//! pub enum Route {
//!     #[layout(AppSidebar)]
//!         #[route("/")]
//!         Home,
//!         #[route("/other")]
//!         Other,
//!     #[end_layout]
//!     #[route("/..route")]
//!     PageNotFound { }, // Handle 404 routes.
//! }
//!
//! // This component is used as container for the router (as it was marked with `#[layout(AppSidebar)]`), which means
//! // That we can render something here that will be rendered no matter what route you are in
//! // Useful for navigation bars.
//! fn AppSidebar() -> Element {
//!     rsx!(
//!         Body {
//!             Link {
//!                 // Specify to what destination you want this Link you point when clicking.
//!                 to: Route::Home,
//!                 label {
//!                     "Home"
//!                 }
//!             },
//!             Link {
//!                 to: Route::Other,
//!                 label {
//!                     "Other"
//!                 }
//!             },
//!             rect {
//!                 main_align: "center",
//!                 cross_align: "center",
//!                 width: "100%",
//!                 height: "100%",
//!                 // This is the place where the routes content will actually be showed.
//!                 Outlet::<Route> {  }
//!             }
//!         }
//!     )
//! }
//!
//! #[component]
//! fn Home() -> Element {
//!     rsx!(
//!         label {
//!             "Home Page"
//!         }
//!     )
//! }
//!
//! #[component]
//! fn Other() -> Element {
//!     rsx!(
//!         label {
//!             "Other Page"
//!         }
//!     )
//! }
//!
//! #[component]
//! fn PageNotFound() -> Element {
//!     rsx!(
//!         label {
//!             "404"
//!         }
//!     )
//! }
//! ```

pub mod animated_transitions;
pub mod native_router;