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
98
//! # 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`](crate::components::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"
//! }
//! )
//! }
//! ```