react-router icon indicating copy to clipboard operation
react-router copied to clipboard

[Bug]: href for NavLink in hashrouter does not use #

Open codeape2 opened this issue 3 years ago • 2 comments

What version of React Router are you using?

6.4.1

Steps to Reproduce

Using createHashRouter - after upgrading from 6.3 to 6.4, the href links rendered by <NavLink> (and <Link>) change:

<NavLink to="/report"> using 6.3: <a href="#/report">
<NavLink to="/report"> using 6.4: <a href="/report">

This breaks right-click -> open in new tab.

Expected Behavior

<NavLink> used within a hash router should create href="#...".

Actual Behavior

<NavLink> used within a hash router creates href without #.

This breaks right-click->open in new tab.

codeape2 avatar Oct 03 '22 10:10 codeape2

Thanks @codeape2! This looks like a regression - we'll get a fix in soon 👍

brophdawg11 avatar Oct 03 '22 15:10 brophdawg11

I created a PR with a failing test: https://github.com/remix-run/react-router/pull/9396

It looks like this only happens when using createHashRouter, it works as expected with <HashRouter>.

This test succeeds:

  describe("when using <HashRouter>", () => {
    test("rendered <Link> hrefs contain #", () => {
      let renderer: TestRenderer.ReactTestRenderer;
      TestRenderer.act(() => {
        renderer = TestRenderer.create(
            <HashRouter>
              <Routes>
                <Route path="/" element={<Link to="/about" />} />
              </Routes>
            </HashRouter>
        );
      });
      expect(renderer.root.findByType("a").props.href).toEqual("#/about");
    });
  });

This test fails:

  describe("when using createHashRouter", () => {
    test("rendered <Link> hrefs contain #", () => {
      let renderer: TestRenderer.ReactTestRenderer;
      TestRenderer.act(() => {
        const router = createHashRouter([
          {
            path: "/",
            element: <Link to="/about"/>
          }
        ]);
        renderer = TestRenderer.create(
            <RouterProvider router={router}/>
        );
      });
      expect(renderer.root.findByType("a").props.href).toEqual("#/about");
    });
  });

codeape2 avatar Oct 03 '22 18:10 codeape2

Merged the fix for this, should be included in a 6.4.3 hopefully later this week

brophdawg11 avatar Oct 17 '22 14:10 brophdawg11

👋 Just did a prerelease (6.4.3-pre.0) which should fix this if you want to give it a shot!

brophdawg11 avatar Oct 21 '22 22:10 brophdawg11