How navigation works

A URL is just an address — like yoursite.com/about. Let's break it down:

  • Domain — the yoursite.com part. It's the name of your website.
  • Path — the /about part. It tells the site which page to show.

A route is the page that lives at a given path.

File-based routing

In Gista.js, the file structure is the URL structure. Create a file called about.tsx in the routes folder, and your site has a /about page. No configuration needed.

FileURL Path
app/routes/
├── index.tsx/ (the homepage)
├── about.tsx/about
└── projects.tsx/projects
※Why is index special? It's an old web convention — when you visit an address without a specific page, the server looks for a file named index. So index.tsx is what shows up at the root /.

The file name becomes the page address. Want a new page? Create a new file. Want to rename a URL? Rename the file. Most modern web frameworks work this way.

What happens when you click a link

When you click a link on your site, the browser doesn't reload the page. Instead:

  1. The URL changes (e.g. from / to /about)
  2. The router finds the matching page file
  3. The page content swaps — instantly, no white flash

That's why navigation feels fast. The browser loaded your site once, and everything after that happens without reloading. This is what makes your site an SPA (single page application).

?What is an SPA? ?Layouts vs. components