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.
A variable on the global window
Within local storage
Assuming you wanted to use the global window, you could use this:
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
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.