Escaping from SPA redirects without the base-url added

[axel7083]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I have my documentation at https://my-domain/documentation/ therefore I configured the baseUrl to '/documentation'. Everything is working well.

I want to have a link to one of my resources at https://my-domain/settings/ however, using the

[settings](pathname:///settings)

Redirect to https://my-domain/documentation/settings/. I cannot hardcode the domain, since the documentation is attached to a deployment that can be, and will put under many different domains.

Reproducible demo

No response

Steps to reproduce

1. Set baseUrl
2. use pathname:// to redirect to somewhere on the domain without hardcoding the domain name.

Expected behavior

Being able to redirect to any part of the website without the baseUrl

Actual behavior

It is redirecting with the baseUrl

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Workarround

In a example.mdx file

export const InternalLink = ({ children, href }) => (
    <button onClick={() => {
        window.location.href = href;
    }} style={{
        background: 'none',
        border: 'none',
        padding: '0',
        font: 'inherit',
        color: 'blue',
        textDecoration: 'underline',
        cursor: 'pointer',
    }}>{children}</button>
);

You can check the <InternalLink href={"/settings/"}>Settings</InternalLink>

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

cc @slorber for opinions

[slorber]

I don't think we support that using the pathname:// protocol. People often link to HTML files inside the site /static folder, and we try to make links not sensitive to baseUrl changes, so it makes sense to apply the baseUrl to those links automatically in most cases.

Not sure how we could extend that proprietary protocol to support your use-case, maybe a query string? 🤷‍♂️

---

I cannot hardcode the domain, since the documentation is attached to a deployment that can be, and will put under many different domains.

You can create a small remark plugin that will replace links with pathname:///settings with the absolute URL for each domain you deploy to.

Note: it's often preferable to build once per domain (instead of building once for all domains) because the domain URL should rather be in the site metadata anyway (canonical URL, SEO etc...).

---

Another option is to provide your own markdown link React component, enhancing hours with your own logic:

https://docusaurus.io/docs/markdown-features/react#mdx-component-scope

import React from 'react';
import MDXComponents from '@theme-original/MDXComponents';
import Link from '@docusaurus/Link';

export default {
  ...MDXComponents,
  a: (props) {
    return <Link autoAddBaseUrl={props.to !== "pathname:///settings"} {...props} />
  }
};

MDX will use your enhanced component instead of the default one, giving you the opportunity to invent your own protocols and proprietary logic if you want to.

<Link> prop autoAddBaseUrl is an undocumented prop (the Link ref API doc is not that good 😅), ref: #7949

[axel7083]

Thanks for all the details and information !

Note: it's often preferable to build once per domain (instead of building once for all domains) because the domain URL should rather be in the site metadata anyway (canonical URL, SEO etc...).

For our use case, it makes sense to build it only once, since we are not responsible of the domain where the application (bundled with the documentation) will be deployed, and is stored as a container image. We do not really care of SEO since it is for internal use.

Another option is to provide your own markdown link React component, enhancing hours with your own logic:

https://docusaurus.io/docs/markdown-features/react#mdx-component-scope

import React from 'react';
import MDXComponents from '@theme-original/MDXComponents';
import Link from '@docusaurus/Link';

export default {
  ...MDXComponents,
  a: (props) {
    return <Link autoAddBaseUrl={props.to !== "pathname:///settings"} {...props} />
  }
};

MDX will use your enhanced component instead of the default one, giving you the opportunity to invent your own protocols and proprietary logic if you want to.

<Link> prop autoAddBaseUrl is an undocumented prop (the Link ref API doc is not that good 😅), ref: #7949

Yeah I get it ! Was hopping something build-in ! But based on the strange use-case we have I get they are not simpler solution !

Closing as resolved, thanks @slorber .