I have 3 pages: `/`, `/users` and `/profile`. What is the best approach for navigation? Should my ba...

# compose-web

[electrolobzik]

I have 3 pages: /, /users and /profile. What is the best approach for navigation? Should my backend serve different html files with different Compose js scrips inside for each of this pages or can I use just one entry point (backend returns the same html file for all 3 urls) in the Compose app and show different content depending on url?

[Big Chungus]

The latter with the help of navigation-compose lib

[electrolobzik]

@Big Chungus androidx.navigation:navigation-compose?

[Big Chungus]

No, sorry. It's called routing-compose I think. You can do routing with decompose too.

[electrolobzik]

@Big Chungus this one? https://github.com/hfhbd/routing-compose

[electrolobzik]

Thanks for mentioning Decompose. I don’t have experience with it but when came across few months ago it looked interesting.

[Big Chungus]

Yes, you found it!

[electrolobzik]

@Big Chungus is there any other way to pass data besides url and what is the best practice to parse urls in Compose?

[electrolobzik]

@Big Chungus If user goes from one page to another it triggers loading of the same js code twice, but every time this code starts from scratch. What are my options to persist some state between 2 pages (urls)? I suppose I need to combine local storage with API calls to my backend. Are there any other options? it could be tricky to manually save all state elements each time they are changed.

[Big Chungus]

You don't need to. State is persisted accross pages since browser never actually leaves your spa.

[Big Chungus]

The only params to be stored in url are the ones you need for permalinks

[electrolobzik]

@Big Chungus how does it work? Does state persist if I reload the page?

[Big Chungus]

No, reload causes full reload of the page. Navigation does not.

[Big Chungus]

Google how react BrowserRouter and HashRouter works to understand why. Same principles are implemented in routing-compose

[electrolobzik]

@Big Chungus I see. If it doesn’t how js knows that the navigation has changed? Is there any special callback from browser to the js code? I am new to web dev, so such simple things look pretty confusing for me :)

[Big Chungus]

There are callbacks for everything. Just Google the two routers and you'll see

[electrolobzik]

@Big Chungus thank you! 👍

[rocketraman]

Note that if you use BrowserRouter instead of HashRouter (which results in nicer URLs), you also need a bit of backend support so that if someone does navigate directly to one of your frontend routes, the backend knows to return the same index.html containing your SPA as it would have if loading from the root.

Your SPA then loads and does the appropriate client-side navigation.

Sounds more complicated than it is...

[Arkadii Ivanov]

Yup, Decompose got the web routing support in the version 0.5.0. Here are some docs: https://arkivanov.github.io/Decompose/router/browser-history/