base slug for state navigator

[aleedmanath]

Is it possible to set a base slug for navigation?

Current use-case: I'm trying to use navigation router inside an existing website. I'm experimenting with both Vite and Next.js, as latter transpiles server dependencies better. Seems to work OK so far. Except for overlapping navigation which I'm trying to fix with a base URL/slug.

So for example, I mounted router in /app slug and any routes and navigation it performs does it from that base URL.

Another use-case for this is to split app into more modular structure, with each domain controlling its router instance.

[grahammendick]

Hey, great to hear from you again.

Yea, you pass 'app' to the applicationPath parameter in your HistoryManager.

// with Navigation React
const historyManager = new HTML5HistoryManager('app')

// or with Navigation React Native
const historyManager = new NavigationStack.HistoryManager(null, 'app')

Then you pass the historyManager into the StateNavigator

const stateNavigator = new StateNavigator([
  {key: 'inbox', route: ''},
  {key: 'mail'},
  {key: 'compose'}
], historyManager);

[aleedmanath]

Yeah literally just got it working and was about to comment. Thanks again!

Glad this is supported. :)

[grahammendick]

Oh nice. The StateNavigator only stores an 'abstract' url. It's the history manager that turns the urls into actual hrefs for hyperlinks and browser history. So you could even create your own history manager if you wanted to add a language parameter to every url, for example.