Add support for relative links with @reach/router

[KyleAMathews]

Currently this doesn't work due to how we render routes. This seems like something that can be fixed.

[kakadiadarpan]

@KyleAMathews is this issue fixed?

[Mike-Dax]

@kakadiadarpan I just noticed this issue when upgrading from one of the beta releases to v2.0.6.

[KyleAMathews]

No this is still a problem actually /cc @ryanflorence

[gatsbot]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.

[Mike-Dax]

This is still an issue.

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[sgnl]

Not exactly sure if this is on topic because the description is a little vague but...

✔️ I'm able to implement relative links if I use Link from '@reach/router'

🐛 I'm unable to implement relative links when using Link from 'gatsby'

Links to code references related to my comments...

withPrefix method in GatsbyLink component -

gatsby/packages/gatsby-link/src/index.js

Lines 10 to 12 in e0db681

	export function withPrefix(path) {
	return normalizePath(`${__PATH_PREFIX__}/${path}`)
	}

(updated: removed old references; added updated reference to withPrefix with commit hash blob instead of alias branched name)

[bryndyment]

This is still an issue.

[ryami333]

Is using @reach/router within a gatsby app "allowed"? Because this solves this problem for our use-case, but I'm not sure what the wider implications are.

[lucletruc]

Still an issue!

[agentofuser]

Related: #14161

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[devuxer]

@KyleAMathews, If this isn't something that can be fixed soon, could there at least be a sentence in the docs saying that relative links are not supported? Having ported over some code from @reach/router, I was completely mystified why relative links were not working.

[patspam]

Just wasted an hour on this - a note in the doc would be much appreciated by the next N people who run into this..

[sidharthachatterjee]

@ascorbic added support for this in #24054 🎉

[guillaumebriday]

@KyleAMathews @ascorbic Hey!

I think this PR has broken the Link behaviour. I got something like that in a component:

<Link to={post.fields.slug}>
  {post.frontmatter.title}
</Link>

This link is under the page /articles and the post.fields.slug is just a string.

Before it was rendered as (excepted result):

<a href="/my-slug">

and now (wrong):

<a href="/articles/my-slug">

I think many sites will be affected by this modification.

How could we fix it? Thank you in advance

[ascorbic]

@guillaumebriday I'm guessing the slug doesn't start with a slash? That means it's a relative link, so this is expected behaviour. Previously it would have given you a warning as it was unsupported, even if it happened to work. You can get the correct behaviour in your case by adding a slash to the start of the link.

[guillaumebriday]

@ascorbic It doesn't. I use allMarkdownRemark with the createFilePath method from gatsby-source-filesysteme to generate a slug field.

By default it does not prefix with a slash.

I fixed it in https://github.com/guillaumebriday/guillaumebriday.fr/commit/36d1848f3fe931ce74dacdd83c451a9698542cce

But I think there are plenty of applications with this behavior.

Anyway, thanks for the help 🙏

[drake-smith]

I have 3-deep, 4-deep nested routes and need to relative on relative links to work.

Per https://www.gatsbyjs.com/docs/gatsby-link/ I should be able to pass a slug ../page to <Link> and have it render the proper relative link. Instead <Link> is stripping the .. and rendering /page and so it is not properly allowing for a relative path.

Gatsby version: "gatsby": "^2.23.12",