Pages and layouts
Overview
Tuono has a file-system based router built on the concept of routes.
When a file is added to the src/routes
directory, it's automatically available as a route.
In Tuono, a page is a React Component exported from a .tsx
file in the src/routes
directory.
Each page is associated with a route based on its file name.
Every page is rendered server side by default.
Example:
If you create src/routes/about.tsx
that exports a React component like:
The About
component will be rendered when loading /about
route.
Index routes
The router will automatically route files named index
to the root of the directory.
src/routes/index.tsx
→/
src/routes/blog/index.tsx
→/blog
Nested routes
You can also create a nested folder structure, and files will still be routed in the same way.
src/routes/blog/first-post.tsx
→/blog/first-post
src/routes/dashboard/settings/username.tsx
→/dashboard/settings/username
Pages with Dynamic Routes
Tuono supports pages with dynamic routes segments.
For example, if you create a file called src/routes/posts/[id].tsx
,
then it will be accessible at posts/1
, posts/2
, etc.
The Root route (Layout components)
Tuono allows you to have a layout component to wrap all the routes included within the same folder.
To define such component you will have to create a __layout.tsx
file (is allowed only a single __layout
file per folder).
This file won't generate any route.
Layout component for all routes
src/routes/__layout.tsx
is a required file that defines the layout component that wraps the entire application.
⚠️ This component is not optional and must include:
<html>
and<body>
HTML tags<TuonoScripts />
component.
Layout component for specific routes
A file created in this location will wrap only the routes defined within the src/routes/posts
folder.
Referring to the two examples above consider that:
/posts/examples-post
→ will be wrapped by:
/about
→ will be wrapped by: