daltonmenezes / electron-router-dom

🧬 A react-router-dom adapter for Electron apps
https://electron-router-dom.daltonmenezes.com
MIT License
136 stars 3 forks source link

Equivalent to `createURLRoute` in new version? #21

Open sebbean opened 1 month ago

sebbean commented 1 month ago

i've installed in a project with electron-vite and react

everything seems to be ok except

I can't seem to match the homepage in dev mode <Router basename="/main"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.

Seems to be related to the lack of ability to load a url vs a htmlFile:

  registerRoute({
    id: 'main',
    browserWindow: mainWindow,
    htmlFile: join(__dirname, '../renderer/index.html'),
  })
  // HMR for renderer base on electron-vite cli.
  // Load the remote URL for development or the local html file for production.
  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])

  } else {
    // mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }
sebbean commented 1 month ago

ok figured it out

had to registerRoute at the end

and then find the vite port and paste into the config

image
sebbean commented 1 month ago

figured it out!

sebbean commented 1 month ago

not quite - i'm noticing HMR is not working

seems to be using the index.html file and not the local dev server

sebbean commented 1 month ago

this is the bottom of my createWindow function


  // HMR for renderer base on electron-vite cli.
  // Load the remote URL for development or the local html file for production.
  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])

  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }

  registerRoute({
    id: 'main',
    browserWindow: mainWindow,
    htmlFile: join(__dirname, '../renderer/index.html'),
  })

and things load but no hot module reloading

sebbean commented 1 month ago

ok turns out HMR works in the top level App / Layout files

But not for the individual route content itself (most of the app)

i know its a recent version! hope this is helpful

ty

daltonmenezes commented 1 month ago

Hi @sebbean , you no longer need to do this manually:

  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])

  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }

registerRoute handles this logic internally, in the development environment it will be used loadURL, in production loadFile as you can see here:

https://github.com/daltonmenezes/electron-router-dom/blob/main/packages/electron-router-dom/src/index.ts#L104-L121

daltonmenezes commented 1 month ago

@sebbean Also, could you please test/check the with-multiple-windows example?

sebbean commented 1 month ago

@daltonmenezes it does look like this is actually an issue with vite + react-dom-router not triggering page content refreshes

i see the reload happen on both the server terminal as well as the dev console in the app

the content inside the page content stays stale

but content in the wrapper layout changes (HMRs) fine

thanks again!

i'll check out