Solidjs route not working...

import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import App from "./App";
import "./index.css";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  root
);

import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import App from "./App";
import "./index.css";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  root
);

import { Routes, Route } from "@solidjs/router";
import Home from "./pages/home";
import About from "./pages/about";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </div>
  );
}

export default App;

import { Routes, Route } from "@solidjs/router";
import Home from "./pages/home";
import About from "./pages/about";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </div>
  );
}

export default App;

export default function Home(){
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default function Home(){
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}