Nav links with hash property are replacing whole URL when embedded in host app

Dash Python
1

Hello all,

This may be something simple to fix but when I run my dash app locally and use my nav links to navigate to different sections of the single page it seems to work fine looking like this "http://127.0.0.1:8050/#other-section.

But when the app is embedded in a host app the hash hrefs seem to be replacing the host app url.

So instead of “http://website/my-host-app/dash-app/#other-section”
It is doing So instead of “http://website/#other-section”

How the nav links are set up

dbc.Nav(
                                            [
                                                dbc.NavLink("Section1", href="#section-1", external_link=True, active="exact"),
                                                dbc.NavLink("Section2", href="#section-2", external_link=True, active="exact"),
                                            ],
                                            vertical=True,
                                            pills=True,
                                        ),
2

Hello @tbell123,

Welcome to the community!

My guess is that this is happening because your links are defaulting to the base url of the application as a whole.

You might have to add the other url to the beef when hosting it inside the other app. This does make it tricky to make sure everything is working, since when testing you won’t be able to click on the links in your local. :stuck_out_tongue_closed_eyes:

3

@jinnyzor

Yes I suspected so, would that URL be set from dash or the host app?

Thanks,

4

You could hardcode the link to be the location instead of using the base url.

Or, do this with the links. my-host-app/dash/target-page.

5

The part of the URL that is after the base URL changes depending on which pathway the report is accessed from. Do you know if this can be pulled through in dcc.Location or get_relative_path()?

6

It definitely can be pulled from there, but is it supposed to be an absolute path for the url? If so, you’d need to make sure that it is routed correctly.

7

I believe it would a relative path.
The URL template would be exactly like this:
www.mywebsite.com/reports/{random-letters-and-numbers-to-generate-specific-app-content}/my-app
everything up to .com is being replaced.

8

Hi @tbell123

If you are using Pages, it can handle variables in the path to navigate to a new page. There are several examples in the multi-page-app-demos repo including this one: GitHub - AnnMarieW/dash-multi-page-app-demos: Minimal examples of multi-page apps using the pages feature in dash>=2.5.1

9

When you say hosting, how exactly is it hosted within another site?

10

I’m not using pages, the nav links are purely navigating to an id for the different sections down one page.

11

What happens if you remove the external_link=True?

12

Locally, removing the external_link=True stops the navlinks from working but left it the functionality seems to work. Not sure how that would have an affect in staging env so would need to test.

13

If that doesnt work, what if you changed it to be a NavItem and it is a html.A instead or dcc.Link.