[v2] Relative links on MD files doesn't work as expected

[prma85]

🐛 Bug Report

On v1 it works just fine.

When using the relative links it will work only when there is no / at the end of the URL. That means you will be fine if you navigate in the sidebar menu and open a relative link, however, if you share a link with someone, the browser (using Google Chrome) will add a / at the end of the URL and for this reason, relative links will not open anymore.

Version 2.0.0.alpha43

(Write your answer here.)

To Reproduce

(Write your steps here:)

1. Create a doc_test.md with a relative link to doc_test_2.md on the same folder.
2. Open your docusarus website and open the new doc (doc_test) from the sidebar menu
3. Access the relative link. It will work. The URL will be localhost:3000/doc_test_2
4. Now, go back, copy and paste the link for the doc_test and open it in a new tab
5. The page now will have a / and the end for the URL
6. Try to open again the link to doc_test_2 page
7. It will return not found. The URL will be localhost:3000/doc_test/doc_test_2

Expected behavior

On v2, if you have a relative link for another MD file in the same folder, we expected that using [link](./anotherFile.md) will open the file/page.

Actual Behavior

The relative links don't work if you are not navigating through the sidebar menu. If you share a link with someone, the relative link will brake.

Reproducible Demo

https://iqmetrix.github.io/hub.docs/docs/guides/configuring-the-sidebar/

If you go to the second paragraph, there is a link in the Have a configured Hub v2 development environment.. Check if you have the / at the end. If you have, the link will not work. Then, navigate back to the Configuring the Sidebar using the sidebar menu (you will see that there is no / anymore in the url) and try to click again the relative link, This time it will work.

[prma85]

I did a temp fix for this issue, but I would love to see what the docusaurus team has to say about this bug.

useEffect(() => {
    if (window && typeof window !== "undefined") {
      const allLinks = document.querySelectorAll("main .markdown a");
      const pathName = window.location.pathname;
      const page = pathName.substr(pathName.slice(0, -1).lastIndexOf('/'))

      if (pathName.substr(-1) === "/") {
        allLinks.forEach(a => (a.href = a.href.replace(page, "/")));
      }
    }
  }, [path]);

[lex111]

@prma85 hmm, I can not reproduce this bug, could you give access to your repo docs to try to check on it?

[yangshun]

I've encountered a similar bug before, but in the end the reason was misuse of the path within the Markdown file and not using the right syntax. For the links to work, a file name (along with the extension) has to be used (e.g. [docs 2](doc_test_2.md)). If you do something like [docs 2](doc_test_2), Docusaurus doesn't treat that link as a Docusaurus file and doesn't process the href value. The end result is it becomes a relative link and defaults to the browser behavior, exactly what you are seeing now.

Are you sure you using the correct syntax here? If you can't share the repo at least share the relevant snippet of Markdown file for us to have a look.

[prma85]

I am sharing here the md file and folder structure So, I have

\-docs-\
\----- guides-\
\------------- configuring-the-sidebar.md
\------------- configuring-environments.md
\------------- v1 \
\------ design -\
...

this is the content of the configuring-the-sidebar.md

---
id: configuring-the-sidebar
title: Configuring the Sidebar and Settings App
---

The sidebar of the Hub shell is configured using the `applications.json` file.

## Prerequisites

Have a configured [Hub v2 development environment](./configuring-environments.md#hub-v2).

So, the link should redirect to https://iqmetrix.github.io/hub.docs/docs/guides/configuring-environments#hub-v2, and it works when there is no / at the end of the url (if you use the navigation from the sidebar since it doesn't add the / at the end). However, if there is the / at the end (if you click in a shared link), it will navigate to https://iqmetrix.github.io/hub.docs/docs/guides/configuring-the-sidebar/configuring-environments#hub-v2 (will considerer the configuring-the-sidebar page as a folder.

[lex111]

@prma85 Unfortunately, I was not able to reproduce this bug. Can you create a reproducible repo?

[prma85]

Actually, looks like the original file has [Hub v2 development environment](./configuring-environments#hub-v2). and it was changed recently to [Hub v2 development environment](./configuring-environments.md#hub-v2). I don't see the error anymore for this page.

@yangshun you were right, the issue was because the link didn't have the .md at the end since it wasn't needed on v1 (the links on v1 always worked with these docs).

Thanks for your time :)