Hash navigation is colliding with the existing hash navigation

[mayank-gangwal]

Using ReDoc as not a stand alone application, but a part of a framework that's an SPA. I am using ant.design, a react application as a boiler plate. I want to integrate ReDoc on one of its tab. I already have a route provider in the application (ex: localhost:8000/#/dashboard/workspace). now while I am trying to use ReDoc component RedocStandalone, while navigating, it already uses this # string, which is causing problem while navigation.

I want something, so that I could access the ReDoc app such after my URL - localhost:8000/#/dashboard/workspace/#section/Authentication, where I need to replace second # with encoded # to navigate smoothly!

Or is there any other way of implementing this, I am unaware of? Please help.

@RomanGotsiy

[RomanHotsiy]

You can fix it by using history-based (pushState, popState) routing strategy in your SPA.

I have no ideas of how to fix this on ReDoc side at the moment. I will think about this. Maybe I'll find some solution.

[kaitmore]

For future travelers using HashRouter - my workaround was to disable location updates altogether by patching the MenuStore activate function. Navigation still works, you just don't get the url state:

import { RedocStandalone, MenuStore } from "redoc";

let originalActivate = MenuStore.prototype.activate;

MenuStore.prototype.activate = function(menuItem) {
  // Call activate() and pass through the menuItem, but set both `updateLocation` and `rewriteHistory` to false
  // https://github.com/Redocly/redoc/blob/42696a01ba8ef27523da40c07a5e61ba606e247f/src/services/MenuStore.ts#L197-L199
  originalActivate.apply(this, [menuItem, false, false]);
};

export default RedocStandalone;

[TranquilMarmot]

Would love an option to disable the URL hash altogether

Moving it to a query string instead would also be nice, i.e. ?redocLocation=operation/CreateThing

[TranquilMarmot]

For anyone else trying to deploy this on GitHub pages with something like react-router, you can try using https://github.com/rafgraph/spa-github-pages to make it so that you don't have to use HashRouter and you can get around this issue 😄

[kbourque]

There are unfortunately situations in which we have to use HashRouter, and I would ideally like the ability to be able to link to certain parts of the spec. So while @kaitmore's solution solves the url overwrite problem, the ability to route to a particular part of the spec from somewhere else on your site is unavailable as a result.

I don't think use BrowserRouter or disabling location updates altogether is a viable solution here. I think @TranquilMarmot's answer is a great idea. Thanks for the help!