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 what components to render, it will redirect the user to the target of the redirect.

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

Redirects are special attributes in the router enum that accept a route and a closure with the route parameters. The closure should return a route to redirect to.

Let's add a redirect to our router enum:

#[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 application and learned about the many things you can do with Dioxus Router. To continue your journey, you attempt a challenge listed below, look at the router examples, or the 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.