<Link> component adds leading slash / to URLs only in Webkit browsers

[Hansenq]

What version of Remix are you using?

1.13.0

I also tested with 1.12.0 and confirmed that the issue is not present in 1.12.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. Create a new Remix project, just the basics

npx create-remix@latest
cd ./my-app

2. Edit app/routes/index.tsx so that one of the <a> tags is changed to a <Link> tag:

import { Link } from "@remix-run/react";

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix</h1>
      <ul>
        <li>
          <Link
            target="_blank"
            to="https://remix.run/tutorials/blog"
            rel="noreferrer"
          >
            15m Quickstart Blog Tutorial
          </Link>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/jokes"
            rel="noreferrer"
          >
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
            Remix Docs
          </a>
        </li>
      </ul>
    </div>
  );
}

Run the server and open the page in Safari (or another Webkit browser). Note that this bug does not occur on desktop Google Chrome.

Expected Behavior

We expect the first <a> tag to have a href value of https://remix.run/tutorials/blog.

The correct behavior appears in Chrome. If you install 1.12.0 and test on Safari, the issue is not present.

Actual Behavior

In Webkit browsers (Safari, iOS Chrome) and Android Chrome running Remix 1.13.0, the first <a> tag has a href value of /https://remix.run/tutorials/blog. This breaks the anchor tag because clicking on the link takes you to http://localhost:3001/https://remix.run/tutorials/blog, which is incorrect.

Note that only the first <a> tag has the wrong href value because it's the only anchor tag that was changed to use a <Link> tag in the code. Also note that this bug does not occur in desktop Google Chrome.

[brophdawg11]

I believe this is a dup of remix-run/react-router#10112 - could you test on [email protected] and see if you still have the issue?

[Hansenq]

Thanks, looks like it's fixed on 1.14.0-pre.1!

[brophdawg11]

Fixed in 1.14.0