Unable to render Component used in dynamic routes

[ellynerdstone]

I'm unable to use dynamic routes using Config Based Routing as in the documentation.

dependencies
solid-js => '1.8.7'
@solidjs/router => '0.10.5'

The documentation for Dynamic Routes uses this function useRoutes that is no longer exported so I implemented some custom logic.

Module '"@solidjs/router"' has no exported member 'useRoutes'.ts(2305)

Here is my implementation:

Pages

import { useParams, Params } from '@solidjs/router'

interface WorkspaceParams extends Params {
  id: string
}

export default function Workspace() {
  const params = useParams<WorkspaceParams>()
  return <p>Current workspace ID: {params.id}</p>
}
 
export default function Login() {
  return <div>Login Page</div>
}

export default function Error() {
  return <div>Error</div>
}

App

import { type Component } from 'solid-js'
import { For } from 'solid-js'
import { Router, Route, useRoutes } from '@solidjs/router'
import { RouteType, routes } from './routes'

const App: Component = () => {
  return (
    <>
      <Router base="/">
        <For each={routes}>
          {(route: RouteType) => (
            <Route path={route.path} component={route.component} />
          )}
        </For>
      </Router>
    </>
  )
}

export default App

routes

import { Component, lazy } from 'solid-js'

const Workspaces = lazy(() => import('src/pages/Workspace'))
const Login = lazy(() => import('src/pages/Login'))
const Error = lazy(() => import('src/pages/Error'))

export type RouteType = {
  path: string
  component: Component
  children?: RouteType[]
}

export const routes: RouteType[] = [
  { path: '/workspaces/:id', component: Workspaces },
  { path: '/login', component: Login },
  { path: '/error', component: Error },
  { path: '**', component: Error },
]

The routes for /login, /error works but nothing is rendered when I attempt to navigate to /workspaces/123. URL /workspaces renders the Error component as desired. The dynamic route is NOT working.