SolidJS•2y ago

`@solidjs/router` doesn't navigate in production mode

export function App() {
   return (
      <MetaProvider>
         <Title>SferaDel</Title>
         <I18n>
            <div>App outline</div>
            <SPARouter />
            <Toaster />
         </I18n>
      </MetaProvider>
   )
}
// spa_router.tsx:
import { LoginPage } from '~/views/login.tsx'
export const AppRoute = Object.freeze({
   Index: '/',
   Login: '/login',
})
export function SPARouter() {
   return (
      <Router>
         <Routes>
            <Route
               path={AppRoute.Index}
               component={() => {
                  return (
                     <div>
                        <Link href={AppRoute.Login}>login</Link>
                     </div>
                  )
               }}
            />
            <Route path={AppRoute.Login} component={LoginPage} />
            <Route path="*" element="[SPA] Not found" />
         </Routes>
      </Router>
   )
}

export function App() {
   return (
      <MetaProvider>
         <Title>SferaDel</Title>
         <I18n>
            <div>App outline</div>
            <SPARouter />
            <Toaster />
         </I18n>
      </MetaProvider>
   )
}
// spa_router.tsx:
import { LoginPage } from '~/views/login.tsx'
export const AppRoute = Object.freeze({
   Index: '/',
   Login: '/login',
})
export function SPARouter() {
   return (
      <Router>
         <Routes>
            <Route
               path={AppRoute.Index}
               component={() => {
                  return (
                     <div>
                        <Link href={AppRoute.Login}>login</Link>
                     </div>
                  )
               }}
            />
            <Route path={AppRoute.Login} component={LoginPage} />
            <Route path="*" element="[SPA] Not found" />
         </Routes>
      </Router>
   )
}

Entry html:

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <!--head-->
   </head>
   <body>
      <!--body-->
      <script type="module" src="../pages/index/app-loader.tsx"></script>
   </body>
</html>

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <!--head-->
   </head>
   <body>
      <!--body-->
      <script type="module" src="../pages/index/app-loader.tsx"></script>
   </body>
</html>

and app_loader:

import { render } from 'solid-js/web'
import { App } from '~/app.tsx'
document.body.innerHTML = ''
render(App, document.body)

import { render } from 'solid-js/web'
import { App } from '~/app.tsx'
document.body.innerHTML = ''
render(App, document.body)

Video with dev and prod modes:

4 Replies

foxpro 🐍OP•2y ago

@thetarnav I asked you about routing yesterday, maybe you have an Idea what am I missing here I also tried navigate from useNavigate, no difference

thetarnav•2y ago

not sure if that is a correct path for catch all if would be /*all I think or ** idk

thetarnav•2y ago

you can look at this template: https://github.com/solidjs/templates/tree/main/ts-router

GitHub

templates/ts-router at main · solidjs/templates

Vite + solid templates. Contribute to solidjs/templates development by creating an account on GitHub.

foxpro 🐍OP•2y ago

Yes it's **, but no difference. However, adding 404.html fallback with SPA entry fixes it -_- could be Deno problem or ssr: true That was Deno <- fault Any ideas why it happens? I deleted deno.lock and it built correctly. Huh.

Gaming

Programming

`@solidjs/router` doesn't navigate in production mode