Solid App Router element not rendering component - Object Object - solid-js

Question

Just started using SolidJS and solid router, already stuck at the route not rendering the component inside "element". Instead it's showing "[object Object][object Object]"
See:
https://codesandbox.io/s/solidjs-shopping-cart-wj5zvr?file=/src/App.jsx
Below is the code:
import { Router, Route } from "solid-app-router";
function Home() {
return <h1>Home page here...</h1>;
}
function Cart() {
return <h1>Cart page here...</h1>;
}
function App() {
return (
<>
<header>header...</header>
<Router>
<Route path="/" element={<Home />} />
<Route path="/cart" element={<Cart />} />
</Router>
<footer>footer..</footer>
</>
);
}
export default App;

Answer 1

Try going with <Route path="/" component={Home} /> instead.
That also makes it wasy to convert to lazy routes (for code splitting) in the future...
<Route path="/" component={lazy(() => import("./home"))} />
EDIT: I took a look at your codesandbox and noticed there is already <Router> in index.jsx so what you want in App.jsx is actually <Routes>...<Routes>.
<Routes>
<Route path="/" component={Home} />
<Route path="/cart" component={Cart} />
</Routes>