Links using file paths and custom style

[RemiLacroix-IDRIS]

Hi,

I am trying to use the Button component (https://docusaurus.community/knowledge/component-library/new/Button/) on our website.

It seems I cannot use file paths in that case, although the Link component is used behind the scene which unfortunately turns out to be a problem in my case.

Say my file is docs/folder/links.md, I want to have buttons that link to docs/folder/subfolder1/target1.md and docs/folder/subfolder2/target2.md.

I cannot use the relative file paths as I would do in pure Markdown, for example [link](subfolder1/target1.md), because Link does not seem to handle the link transformation. However if I use subfolder1/slug-target1 the link is broken when accessing the page links.md directly because its URL is in fact https://mywebsite/docs/folder/links/ and the link incorrectly points to https://mywebsite/docs/folder/links/subfolder1/slug-target1.

Currently my workaround is to use an absolute URL but it will cause some issues if the slurgs change and maybe if I use internationalization.

Is this expected?

Best,
Rémi

[slorber]

File path links are only supported within md/mdx files, and are not supported by JSX/React components.

It is unrelated to the <Button> component described on this page that is a community resource, not written by me.

subfolder1/slug-target1 is a relative link, its target depend on the page you are currently. This is not Docusaurus behavior but just how the web works. Just prefixing the link with a / /subfolder1/slug-target1 would probably help solve your problem. You do not need to add the domain name to the url.

We have utils to append automatically the site baseUrl (including the i18n baseUrl locale) to React links: https://docusaurus.io/docs/docusaurus-core#useBaseUrl

[RemiLacroix-IDRIS]

Thanks for your answer!

I understand the relative link issue and I currently use:

<Link to="/docs/folder/subfolder1/slug-target1">

which works but I was under the impression that this would break if using i18n.

Reading the documentation you shared, it's unclear to me if that's actually true. Could you shed some light on the best practice in that case?

Rémi

[slorber]

If you want to support a site in English and French, you have 2 strategies common:

• Subdomains: example.com + fr.example.com
• Subpaths: / + /fr/ baseUrl

Ann URL will break only if you use the subpath strategy because your pathnames will eventually have a locale /fr/ prefix so the path is not correct anymore

The solution is explained in the doc link I provided:

import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';

const SomeImage = () => {
  const imgSrc = useBaseUrl('/img/myImage.png');
  return <img src={imgSrc} />;
};

Our <Link> component is something we provide, and we enhanced it to automatically add that base URL prefix for you. This ensures that most links do not break if you use i18n or decide to host your site under a subpath.

Documented here:

[RemiLacroix-IDRIS]

Understood, thanks!