How to manage undefined routes with config based router.

[vpaivag]

Hi. I'm new to solid and migrating from React. I'm very familiar with React-Router and, lately, using it with config-based-like syntax as seen here. The thing is, when I'm trying to add undefined route handling, I'm getting some errors that I don't get when using JSX-like routing. Here is the comparison

imports ....
const Home = lazy(() => import('./pages/Home'));

function App () {
        ....
        return (
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/search" element={<p>Search</p>} />
          <Route path="*" element={<p>Page Not found</p>} />
        </Routes>
        )
}

With this example, when accessing /randomUrl i get the Page not found text, so it's working. But when using config-based routing, it doesn't.

const Home = lazy(() => import('./pages/Home'));

const routes = [
  {
    path: '/',
    component: <Home />,
  },
  {
    path: '*',
    element: <p> Page not found </p>,
  },
];

function Routes() {
  const R = useRoutes(routes);
  return (
    <>
        <R />
    </>
  );
}

When using this router, I go to an empty page. Any ideas?

Thanks!

PD: Also, whats the difference between component and element in the <Route /> component?