In this tutorial, you will learn how to create a link within the quick navigator that opens the current page within Episerver. The twist, the website will be a single-page application using ReactJS. The quick link navigator is a small menu that appears when a logged-in content editor views an Episerver powered website. More information on this can be found here.

This article assumes you are using DXP and that you are still using .NET to load the page layout so you have access to the server-side code that renders out the quick navigator onto a page. THe code to do this looks like this:

The interesting part of this tutorial is not about creating a link within the navigation bar. How to do this has been documented numerous times. The interesting part is hooking a single-page application up with some backend C# code. To combine state-managed within a ReactJS application with some backend C#.

When you use the content delivery API and a ReactJS application, it is likely that you will use React router to manage the routing within the SPA. This makes creating a link in the quick navigator complicated. You can not tell from the current HTTP context what page the user might be viewing. This poses a problem. The code to create a quick navigation link will need to be C# code. The C# code will not be able to access the internal React state.

To solve the problem it will require an intermediary step. Whenever a page changes in the React app, the current page ID will need to be stored somewhere that can be accessed by normal vanilla Javascript. The two most obvious places:

  • A variable on the global window

  • Within local storage

Assuming you wanted to use the global window, you could use this:

Or:

With the current page accessible by Javascript, you can create a custom IQuickNavigator. If you look at the documentation for QuickNavigatorMenuItem you may notice that two potential overloads exist that look helpful, 'javascript' and 'enabled script'. After some testing and some reflection using DotPeek, I can confirm these properties do nothing. This is a bug with the core code. So a different approach was needed. Based on the properties IQuickNavigatorItemProvider exposes, you will manually need to create a javascript link using the normal URL property. When we pull everything together, the class definition looks like this:

Granted the code above is slightly hacky. A clean approach might be to create a completely new navigator yourself, however, this will involve more effort. In the code above, first, the editor URL is retrieved using the PageEditing helper. I'm using the RootPage as a placeholder. The page will never link here. you could change this to be anything you want. The actual current page ID will be read using JS.

Within URL we define some javascript that will redirect the user to the editor URL. When the button is clicked the Javascript will read the current page ID from the global window/local storage. Using this technique means you can link to the current page rather than the first page the user navigated to. Happy Coding!