Home route "/" returns an empty string as url

[rothsandro]

Situation The application defines a home route "/" and another route which is not nested.

const homeRoute = route("/", {}, {});
const aboutRoute = route("/about", {}, {});

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={homeRoute.template} element={...} />
        <Route path={aboutRoute.template} element={...} />
      </Routes>
    </BrowserRouter>
  );
}

Expected The home route should return "/" as the url. When used on a Link element it should result in href="/".

Actual The home route returns an empty string as url which results in <Link to="" />. When the user is on the about page this will render a link that navigates to the current page <a href="/about">.

console.log(`Route: "${homeRoute({}).$}"`); // Route: ""

Repro: https://github.com/rothsandro/repro-typesafe-routes

[kruschid]

@rothsandro thank you for reporting. @codebutler has kindly solved the problem. Will publish on npm.