How navigation works
A URL is just an address — like yoursite.com/about. Let's break it down:
- Domain — the
yoursite.compart. It's the name of your website. - Path — the
/aboutpart. 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.
| File | URL 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:
- The URL changes (e.g. from
/to/about) - The router finds the matching page file
- 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