In this tutorial, you will learn how to create a link within the quick navigator that redirects a content editor to the pages of the current edit mode within Episerver. This article is assuming that you are using .NET to load the page layout and have the server-side quick navigator rendering on the page:

The interesting part of this tutorial is not creating a custom the link within the navigation bar. How to do this has been documented numerous time. The interesting part is hooking a single-page application up with some backend C# code. To combine state-managed within a React.js application - using the Episerver content API - with some backend C#.

When you create a React.js application as the headless solution for Episerver 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.

Having a headless React application that talks to the Episerver context API will require the state to be managed somewhere within the browser. It is likely you would use Redux or potentially React context with a hook. 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 intimidatory 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. This is the only way to solve this problem if you want to integrate within the Episerver quick navigator. 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 of the SPA rather than the first page the user navigated to. Happy Coding!