[Bug]: Navigating routes created with createBrowserRouter causes full app reload on route change

[lauritk-solita]

What version of React Router are you using?

6.27.0

Steps to Reproduce

App.tsx

import './App.css'
import { createBrowserRouter, RouterProvider, useLoaderData } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: "/",
    loader: () => ({ message: "Hello Data Router!" }),
    Component() {
      const data = useLoaderData() as { message: string };
      return <div><h1>{data.message}</h1><a href="/about">About</a></div>;
    },
  },
  {
    path: "/about",
    loader: () => ({ message: "About Page" }),
    Component() {
      const data = useLoaderData() as { message: string };
      return <div><h1>{data.message}</h1><a href="/">Home</a></div>;
    },
  },
]);

export default function App() {
  return <RouterProvider router={router} fallbackElement={<p>Loading...</p>} />;
}

if (import.meta.hot) {
  import.meta.hot.dispose(() => router.dispose());
}

main.tsx

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

console.log("Hello world!");


ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Expected Behavior

The app shouldn't do full reload on route change. The console.log("Hello world!"); in main.tsx should be ran only once, like when using useRoute to create routes or elements.

Actual Behavior

Full app reload running console.log("Hello world!"); every route change. Is this the default behavior? If so, what's the rationale behind it?

[lauritk-solita]

Solved, I was using <a> instead of <Link>