Dash: Use dcc.Link in a dcc.Markdown component for high performance links that don't refresh the page

markdown_with_dcc_link.py

from dash import Dash, html, dcc

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(["Regular Markdown link - note that the page refreshes"]),
        dcc.Markdown(["[Page 1](page1)"]),
        html.Br(),
        html.Div(["Markdown dccLink - note that the pages does not refresh"]),
        dcc.Markdown(
            ['<dccLink href="/page2" children="Page 2" />'],
            dangerously_allow_html=True,
        ),
        html.Br(),
        html.Div(["Markdown dccLink - explicit children"]),
        dcc.Markdown(
            [
                """
            <dccLink href="page3">
                Page 3
            </dccLink>
                """
            ],
            dangerously_allow_html=True,
        ),
        html.Br(),
        html.Div("Markdown dccLink = inlined"),
        dcc.Markdown(
            [
                'This is an inlined <dccLink href="/page4" children="Page 4" /> with text on both sides'
            ],
            dangerously_allow_html=True,
        ),
        html.Br(),
        html.Div("Markdown dccLink - nested image -click on image"),
        dcc.Markdown(
            [
                """
            <dccLink href="/page5">
                <img src="assets/image.png" />
            </dccLink>
        """
            ],
            dangerously_allow_html=True,
        ),
        html.Br(),
        html.Div(
            "Markdown dccLink - nested markdown - title is formatted with markdown syntax"
        ),
        dcc.Markdown(
            [
                """
            <dccLink href="/page6">
                <dccMarkdown children="## Page 6" />
            </dccLink>
                """
            ],
            dangerously_allow_html=True,
        ),
        html.Br(),
        html.Div("Markdown dccLink - nested markdown image"),
        dcc.Markdown(
            [
                """
            <dccLink href="page7">
                <dccMarkdown children="![Image](assets/image.png)" />
            </dccLink>
        """
            ],
            dangerously_allow_html=True,
        ),
        html.Br(),
        html.Div(
            "Markdown dccLink - requires dangerously_allow_html - this link is not visible"
        ),
        dcc.Markdown(['<dccLink href="page8" children="Title" />']),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)