[Bug]: href for NavLink in hashrouter does not use #
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.
Thanks @codeape2! This looks like a regression - we'll get a fix in soon 👍
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");
});
});
Merged the fix for this, should be included in a 6.4.3 hopefully later this week
👋 Just did a prerelease (6.4.3-pre.0) which should fix this if you want to give it a shot!