Introduction

If you are not familiar with Dioxus itself, check out the Dioxus guide first.

Whether you are building a website, desktop app, or mobile app, splitting your app's views into "pages" can be an effective method for organization and maintainability.

For this purpose, Dioxus provides a router. Use the cargo add command to add the dependency:

cargo add dioxus-router

Then, add this to your Dioxus.toml (learn more about configuration here):

[web.watcher]
index_on_404 = true

This configuration only works when using dx serve. If you host your app in a different way (which you most likely do in production), you need to find out how to add a fallback 404 page to your app, and make it a copy of the generated dist/index.html.

This will instruct dx serve to redirect any unknown route to the index, to then be resolved by the router.localhost:8080, then click a link to go to localhost:8080/contact), the app renders the new route without reloading.before going to the index (go straight to localhost:8080/contact), we are trying to access a static route from the server, but the only static route on our server is the index (because the Dioxus frontend is a Single Page Application) and it will fail unless we redirect all missing routes to the index.

This book is intended to get you up to speed with Dioxus Router. It is split

1. The reference section explains individual features in
2. If you prefer a learning-by-doing approach, you can check out the example project. It guides you through

Please note that this is not the only documentation for the Dioxus Router. YouAPI Docs.