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?

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>

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/

Answer 3

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

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