SolidJS routing not working, needs to reload the page.

           <nav>
                <li id="link-library">

                    <nav>
                    <A href="/my-library" activeClass="underlined" inactiveClass="default">
                        <p className="links-texts">My Library</p>
                    </A>
                    </nav>

                </li>
            </nav>

    const sidebarRoutes = [
        {
            path: "/",
            component: lazy(() => import("./templates/gamehub-01/Gamehub")),
        }, 
        {
            path: "/my-library",
            component: lazy(() => import("./templates/mylibrary-01/Mylibrary"))
        }
    ]

  return (
            <div className="app-container">
                <div className="main-content">
                    <div className="searchbar">
                        <Searchbar />
                    </div>
                    <Router>
                        {sidebarRoutes}
                    </Router>
                </div>
            </div>
)

render(() => ( 
    <Router root={App}></Router>
    ), document.getElementById("root"));