Modern web frameworks give you two building blocks: layouts and components. They solve the same problem — define once, use everywhere — but at different scales.
Layouts are the outer shell. Think of a picture frame — the frame stays the same, only the photo inside changes. When you navigate from /about to /projects, the layout (nav bar, footer) stays put and only the page content swaps out. Without a layout, you'd copy the same nav into every page. Change the nav? Update every file. A layout lets you write it once.
Components are the inner pieces. They're reusable chunks of UI — cards, buttons, forms — that you use within a page. You define a card component once and use it three times with different content.
| Layouts | Components | |
|---|---|---|
| Scale | Wrap entire pages | Live inside pages |
| Examples | Nav bar, footer, sidebar | Cards, buttons, forms |
| Provided by | React Router | React |
The tool that makes navigation work is called React Router. We chose it for Gista.js because it's the most widely used router in the React ecosystem — battle-tested, stable, and beginner-friendly.
You don't need to configure it — thanks to react-router-auto-routes, which reads your file structure and sets up routes automatically.
React Router gives you file-based routing and layouts. You'll see "React Router" in error messages, documentation, and AI responses. Now you know what it is: the part of your app that handles navigation and page structure.
React Router isn't the only router out there. TanStack Router and Next.js (Pages Router / App Router) solve the same problem — mapping URLs to pages — just with different APIs.
?Why React Router?