Redirection Perfection

You're well on your way to becoming a routing master!

In this chapter, we will cover creating redirects

Creating Redirects

A redirect is very simple. When dioxus encounters a redirect while finding out

As a simple example, let's say you want user to still land on your blog, even/myblog or /myblog/:name.

Redirects are special attributes in the router enum that accept a route and a closure

Let's add a redirect to our router enum:

src/full_example.rs
#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
    #[layout(NavBar)]
        #[route("/")]
        Home {},
        #[nest("/blog")]
            #[layout(Blog)]
                #[route("/")]
                BlogList {},
                #[route("/post/:name")]
                BlogPost { name: String },
            #[end_layout]
        #[end_nest]
    #[end_layout]
    #[nest("/myblog")]
        #[redirect("/", || Route::BlogList {})]
        #[redirect("/:name", |name: String| Route::BlogPost { name })]
    #[end_nest]
    #[route("/:..route")]
    PageNotFound {
        route: Vec<String>,
    },
}

That's it! Now your users will be redirected to the blog.

Conclusion

Well done! You've completed the Dioxus Router guide. You've built a small router examples, or API reference.

Challenges

  • Organize your components into separate files for better maintainability.
  • Give your app some style if you haven't already.
  • Build an about page so your visitors know who you are.
  • Add a user system that uses URL parameters.
  • Create a simple admin system to create, delete, and edit blogs.
  • If you want to go to the max, hook up your application to a rest API and database.