Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
codeape2 opened this issue Oct 3, 2022 · 4 comments · Fixed by #9409
Closed

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

codeape2 opened this issue Oct 3, 2022 · 4 comments · Fixed by #9409
Labels

Comments

@codeape2
Copy link

codeape2 commented Oct 3, 2022

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 codeape2 added the bug label Oct 3, 2022
@brophdawg11
Copy link
Contributor

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

@codeape2
Copy link
Author

codeape2 commented Oct 3, 2022

I created a PR with a failing test: #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");
    });
  });

@brophdawg11
Copy link
Contributor

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

@brophdawg11
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants