Pages and routing
In Rakkas, a page is a React component default exported from a module in the src/pages
directory, named page.jsx
or anything that matches *.page.jsx
(or tsx
, or any other extension included in the pageExtensions
configuration option).
Rakkas has a file system-based router. The file name determines the URL path. The rules are easy:
Module name | URL path |
---|---|
src/pages/page.jsx | / |
src/pages/about.page.jsx | /about |
src/pages/about/page.jsx | also /about |
This specific naming convention ((name.)?page.{extension}
) allows you to have your helper libraries and components next to your page components without accidentally exposing them as routes.
A very simple Rakkas page would look like this:
src/pages/page.jsx
import React from "react"; import { Helmet } from "react-helmet-async"; const HelloWorld = () => ( <div> <Helmet title="Hello World Example - Rakkas" /> <h1>Hello world!</h1> </div> ); export default HelloWorld;
Rakkas Demo App
Rakkas supports react-helmet-async
for managing head tags (title
, base
, meta
, link
, script
, noscript
, and style
) and attributes for body
, html
, and title
tags.
Dynamic routes
Sometimes you need to encode parameters in the URL path like /post/1
, /post/2
etc. Dynamic routes like this are handled using [square brackets]
. If you have a file named /src/pages/profile/[userName].page.jsx
, for instance, and you visit /profile/fatih
, your page component will receive { userName: "fatih" }
in props.params
like in the example below.
[userName].page.jsx
import React from "react"; import { Helmet } from "react-helmet-async"; const UserProfilePage = ({ params }) => ( <div> <Helmet title={`Params Example - Rakkas`} /> <p> Hello <b>{params.userName}</b>! </p> <nav> <ul> <li> <a href="/examples/params/Fatih">Fatih's profile</a> </li> <li> <a href="/examples/params/Dan">Dan's profile</a> </li> <li> <a href="/examples/params/Engin">Engin's profile</a> </li> </ul> </nav> </div> ); export default UserProfilePage;
Rakkas Demo App
Go ahead and can click on the links, they won't take you away from this page.
You can use more than one dynamic parameter like /user/[userName]/posts/[postId]
. You can even put multiple parameters in a single path segment if you delimit them with -
or .
, like /user-[name]-[surname]/contact-info
(matches /user-fatih-aygun/contact-info
with params: { name: "fatih", surname: "aygun" }
for instance).
More specific routes have priority over more generic ones, so you can have both /products/list
for a specific match and /products/[productId]
as a catch-all route.