Navigate between pages in Electron app

Question

In an Electron application, what is the standard way to navigate to different pages / locations when a link is clicked?

I tried creating

   <a href="/profile.html>profile</a>

and an HTML file named profile.html, but clicking the link just takes my app to a blank page.

What is actually happening when the link is clicked & what is the right way to do basic links?

Merridie

Answer 1

Just use a relative link - this will work (note no slash at the beginning):

<a href="profile.html">profile</a>

This is because Electron uses local file:// URLs which map to your file system. If you link to /profile.html that will be looking for the file in the root of your drive, and you probably want it to be loading the file from the same directory instead.

Also if you put the profile.html in a directory called pages you could access it like this:

<a href="pages/profile.html">profile</a>

Pastry

I doubt this is an efficient way of doing it. The screen flickers for 1 second when changing pages. There has to be another way specifically made for electron... – Onassis

What other way ? @joseph – Viscose

Answer 2

Electron is designed to work best as a single-page application. Clicking a link shouldn't load a new page but should manipulate the DOM to changes the contents on the same page.

If you use jquery you could use Tabs to swap between content https://jqueryui.com/tabs/

Tumblebug

Answer 3

<a href="./profile.html>profile</a>

use ./{filename} to access the file in the same directory

Tecumseh

Answer 4

Yes i am about a month or 4 working with electron, came from C# => windows forms, winui3 and those platforms. What me makes really happy about electron is the versatility and ease of making front-end (ui), the bad thing about electron is the pages. (while apps made with electron looks like having pages, WhatsApp/ discord....) So for once and for clearity:

Build an application with Electron: it has the app which embeds the index.html into a frame => in that frame make a navigation and a content goes here inside that navigation put buttons with backend javascript in renderer.js <= because that is the backend of the WHOLE app. So there you must make the navigation logic, loading page.html files into the content div. Then make page.html backends with page.js (example) export those js lines as functions and classes and export them being modules. This works generally well, but is a bit a hasle, because 'normal webtech is omited', it is not like navigating in the browser.

Coterie