Recommended way to implement Navigation in ReactiveUI-based projects

[Daxter98]

Hello everyone!

I recently ran into an interesting issue with RoutedViewHost on MAUI. When implementing navigation from a LoginPage to a HomePage, I wanted to reset the navigation stack so the back button would not return to the login screen. Even though the navigation stack was being cleared correctly and only the HomePage remained, the back button still appeared, I was using latest nuget package.

After some investigation, I discovered that although the stack reset worked, the internal logic that syncs the Router with the NavigationStack was re-adding the LoginPage.

To troubleshoot this, I downloaded the RoutedViewHost implementation for MAUI, and—with a lot of help from Copilot—I managed to fix the issue. Now, NavigateAndReset correctly sets the navigated page as the root page. This also resolved a secondary issue where the page title would flicker, or the navigation button would briefly appear during sync.

Since I’m not yet comfortable contributing via pull requests (yes, I definitely need a proper Git tutorial beyond just add/commit/push 😅), I’m attaching the working code here. So far, I’ve only tested it on Android, and some parts of the code may not even be necessary—I'll verify as I test iOS, macOS, and Windows.

CustomRoutedViewHost.txt

Now, back to my original question.

During this process I discovered two interesting navigation frameworks: Sextant and the newer CrissCross. After reading about both, they seem quite similar in purpose and design.

So here’s what I’d love to know:

What’s the recommended way to implement navigation in ReactiveUI-based projects?

Personally, I like RoutedViewHost—I’ve used it extensively in AvaloniaUI—but I’m also looking to explore more of the frameworks and tools available in ReactiveUI. I also hope to get the You, I, and ReactiveUI book soon to gain deeper insights into the framework in general.

Thanks!

[anntnzrb]

Use Sextant.Maui instead of the built-in RoutedViewHost for MAUI navigation. Replace Router.NavigateAndReset.Execute(vm) with AppLocator.Current.GetService<IParameterViewStackService>().PushPage<HomeViewModel>(resetStack: true, animate: true). This avoids the sync/flickering issues in ReactiveUI.Maui's RoutedViewHost implementation. See https://github.com/reactiveui/Sextant for setup.

[glennawatson]

Multiple options, some people use Prism navigation with RxUI, they both operate with each other and this is URL based navigation. Others use Sextant

[Daxter98]

Oh! I think I saw that combination on Allan's Ritchie Shiny Lib Framework about a year ago. I think it's been deprecated now, but I can still take inspiration from it. I'm not sure about Prism, though. Thanks, Glenn!

[anntnzrb]

For MAUI, use Sextant.Maui instead of RoutedViewHost to avoid NavigationStack sync issues. Install via NuGet, register views with Locator.CurrentMutable.RegisterViewForNavigation<HomeView, HomeViewModel>(), and navigate using IParameterViewStackService.PushPage(). See https://github.com/reactiveui/Sextant for docs. Alternative: CrissCross (https://github.com/reactivemarbles/CrissCross) or Prism navigation alongside RxUI.

[Daxter98]

For now, I think I'll use Sextant. I've been reading the documentation and the Maui sample, and I'm starting to understand it better than CrissCross. The latter is also an interesting approach, but I haven't quite grasped it yet. Thanks!

[Daxter98]

Wow it really works quite well. I just modified the CreateWindow method instead of using the deprecated MainPage property, like this:

    protected override Window CreateWindow(IActivationState? activationState)
    {
        var mainPage = Locator.Current.GetNavigationView()!;

        // Init the navigation
        var viewStackService = Locator
            .Current
            .GetService<IViewStackService>();

        viewStackService?
            .PageStack
            .FirstAsync()
            .ObserveOn(RxSchedulers.MainThreadScheduler)
            .Subscribe(stack =>
            {
                if (stack.Count == 0)
                {
                    Debug.WriteLine("The stack is empty, adding the root page");

                    viewStackService?
                        .PushPage(new LoginViewModel(), contract: null, resetStack: true, animate: false)
                        .Subscribe();
                }
                else
                {
                    Debug.WriteLine("The stack is not empty, no need to add the root page");
                }
            });

        return new Window(mainPage);
    }

And there you go, it works! Otherwise, leaving the code as it is causes the app to crash when it's moved to the background and then returned to the foreground.

    Locator
    .Current
    .GetService<IViewStackService>()
    .PushPage(new HomeViewModel(), null, true, false)
    .Subscribe();

    return new Window(Locator.Current.GetNavigationView());

[ChrisPulman]

Thank you for the feedback, I will update the Sextant documentation to reflect your findings.