Skip to content

[Bug]: NavLink and Link cannot parse the href attribute of <a> tag correctly when use createHashRouter method to create hash router. #9578

@masonsi-dev

Description

@masonsi-dev

What version of React Router are you using?

v6.4.2

Steps to Reproduce

const router = createHashRouter(
  createRoutesFromElements(
    <Route>
      <Route path="/" element={<Home />}  />
      <Route path={"pageA"} element={<PageA />} />
      <Route path={"pageB"} element={<PageB />} />
    </Route>
  )
)

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

const Home = () => {
  return (
    <>
      <ul>
        <li>
          <NavLink to={'pageA'}>PageA</NavLink>;
        </li>
        <li>
          <Link to={'pageB'}>PageB</Link>;
        </li>
      </ul>
    </>
  )
}

CleanShot 2022-11-10 at 12 02 30

Expected Behavior

The tag's href attribute should be a hash url. It would work if I use instead of createHashRouter.
I change the code to . All the rest keeps same.

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <HashRouter>
    <Routes>
      <Route path="/" element={<Home />}  />
      <Route path={"pageA"} element={<PageA />} />
      <Route path={"pageB"} element={<PageB />} />
    </Routes>
  </HashRouter>
);

CleanShot 2022-11-10 at 12 06 52

Actual Behavior

CleanShot 2022-11-10 at 12 02 30

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions