dioxus/packages/router/README.md

114 lines
2.8 KiB
Markdown
Raw Normal View History

# Dioxus Router
2022-12-29 21:17:03 +00:00
[![Crates.io][crates-badge]][crates-url]
[![MIT licensed][mit-badge]][mit-url]
[![Build Status][actions-badge]][actions-url]
[![Discord chat][discord-badge]][discord-url]
[crates-badge]: https://img.shields.io/crates/v/dioxus-router.svg
[crates-url]: https://crates.io/crates/dioxus-router
[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg
[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT
2022-12-29 21:17:03 +00:00
[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg
[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster
[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square
[discord-url]: https://discord.gg/XgGxMSkvUM
[Website](https://dioxuslabs.com) |
[Guides](https://dioxuslabs.com/learn/0.5/router/) |
[API Docs](https://docs.rs/dioxus-router/latest/dioxus_router) |
2022-12-29 21:17:03 +00:00
[Chat](https://discord.gg/XgGxMSkvUM)
## Overview
2023-04-11 17:21:48 +00:00
Dioxus Router is a first-party Router for all your Dioxus Apps. It provides an
interface similar to React Router, but takes advantage of types for more
expressiveness.
2021-11-19 05:49:04 +00:00
2023-05-31 20:51:26 +00:00
```rust, no_run
2022-12-13 11:42:18 +00:00
use dioxus::prelude::*;
use dioxus_router::prelude::*;
2023-05-31 20:51:26 +00:00
use std::str::FromStr;
#[rustfmt::skip]
2023-06-02 17:33:47 +00:00
#[derive(Clone, Debug, PartialEq, Routable)]
2023-05-31 20:51:26 +00:00
enum Route {
#[nest("/blog")]
#[layout(Blog)]
#[route("/")]
BlogList {},
#[route("/:blog_id")]
BlogPost { blog_id: usize },
#[end_layout]
#[end_nest]
#[route("/")]
Index {},
}
2022-12-13 11:42:18 +00:00
#[component]
fn App() -> Element {
2024-01-16 19:18:46 +00:00
rsx! {
2023-07-26 01:14:48 +00:00
Router::<Route> { }
2022-12-13 11:42:18 +00:00
}
}
#[component]
fn Index() -> Element {
2024-01-16 19:18:46 +00:00
rsx! {
2022-12-13 11:42:18 +00:00
h1 { "Index" }
Link {
2023-07-24 18:57:56 +00:00
to: Route::BlogList {},
2022-12-13 11:42:18 +00:00
"Go to the blog"
}
}
}
#[component]
fn Blog() -> Element {
2024-01-16 19:18:46 +00:00
rsx! {
2022-12-13 11:42:18 +00:00
h1 { "Blog" }
2023-07-26 01:14:48 +00:00
Outlet::<Route> { }
2022-12-13 11:42:18 +00:00
}
}
#[component]
fn BlogList() -> Element {
2024-01-16 19:18:46 +00:00
rsx! {
2022-12-13 11:42:18 +00:00
h2 { "List of blog posts" }
Link {
2023-07-24 18:57:56 +00:00
to: Route::BlogPost { blog_id: 0 },
2022-12-13 11:42:18 +00:00
"Blog post 1"
}
2022-12-13 11:42:18 +00:00
Link {
2023-07-24 18:57:56 +00:00
to: Route::BlogPost { blog_id: 1 },
2022-12-13 11:42:18 +00:00
"Blog post 2"
}
}
}
#[component]
fn BlogPost(blog_id: usize) -> Element {
2024-01-16 19:18:46 +00:00
rsx! {
2022-12-13 11:42:18 +00:00
h2 { "Blog Post" }
}
2021-11-19 05:49:04 +00:00
}
```
2021-11-19 05:49:04 +00:00
2022-12-29 21:17:03 +00:00
You need to enable the right features for the platform you're targeting since these are not determined automatically!
## Contributing
- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).
- Join the discord and ask questions!
## License
2023-05-31 20:51:26 +00:00
2022-12-29 21:17:03 +00:00
This project is licensed under the [MIT license].
[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT
2021-11-19 05:49:04 +00:00
2022-12-29 21:17:03 +00:00
Unless you explicitly state otherwise, any contribution intentionally submitted
for inclusion in Dioxus by you shall be licensed as MIT without any additional
2022-12-29 21:17:03 +00:00
terms or conditions.