Nijor provides a client-side routing capability that allows the rendering of different user interfaces based on specific routes. Unlike traditional approaches, Nijor's routing mechanism renders routes within the same page, eliminating the need for page refreshes and delivering a seamless user experience.
Nijor simplifies the process of rendering pages for different routes by utilizing file-based routing. This means that developers are relieved from the responsibility of manually coding the rendering logic for each route. Instead, Nijor's compiler automatically handles this based on the organization of files in the src/pages directory of your Nijor project.
To illustrate this behavior, let's consider an example. When a user visits the '/' route of our website, the page rendered will be src/pages/index.nijor. Similarly, accessing the '/about' route will trigger the rendering of src/pages/about.nijor. In the event that a route doesn't exist, Nijor will render src/pages/404.nijor. This convenient approach streamlines the development process and improves overall efficiency.
The App.nijor is the root component that gets rendered before anything else ; all the other components and pages get rendered inside it. Without this page, the Nijor router simply won't work. You can render those components in this page which remain same in all the pages, thus preventing the need for rerendering the common components during navigation through different routes.
The App.nijor file must have the <div n:slot></div> in the App.nijor file. The content from the routes (pages from the src/page/ dir) will be rendered inside this special tag.
<body>
<div n:slot>
<!--All the pages from the src/pages directory are rendered inside this div (marked with the n:slot attribute).
Anything outside this div is always rendered irrespective of route.
You can write code for common header or footer outside this div so that it renders in every page, #Reasuablity
-->
</div>
<!-- Note : Do not add an 'id' attribute to the div with the n:slot attribute. For styling, use 'class' instead. -->
</body>
In order to use the Nijor Router in your project, your src/App.js file must contain the following Boilerplate code :
import { Render } from 'nijor';
import 'nijor/router';
import App from 'App.nijor';
//@Routes()
(async ()=> await Render(App))();
In order to navigate between routes we use the n:route attribute on the anchor tag only. If we use the href attribute instead of n:route, we'll still be able to navigate. But the page will reload and the navigation won't be that smooth. Use href attribute for linking to external website.
<a n:route="/">Index Page</a> <!--Routing will be smooth, the page won't refresh-->
<a href="/">Index Page</a> <!--Routing won't be smooth, the page will refresh-->
By sub routes, we mean routing within a parent route.
For instance, there is a route say, /dashboard which has some sub-routes like /dashboard/profile, /dashboard/settings, etc and each of these pages have a lot of common components and common layout in general. So, you don't want to copy-paste the same common code for these pages. In these scenarios, sub-routes can be very useful.
In order to create a sub route within a route :
(1) Create a folder, say 'dashboard' inside the src/pages directory.
(2) Create the _.nijor file within it. (optional)
(3) Create index.nijor file within the folder.
(4) Create profile.nijor file within the folder.
Now, write all the common components in the _.nijor file. This file contains all the common code/components for the '/dashboard' route. Whenever somebody visits '/dashboard/*', this page will get rendered. If you don't have the _.nijor file, the routes will be directly rendered inside the div[n:slot] in the App.nijor.
<!-- src/pages/dashboard/_.nijor -->
<sidenav n:imported="components/sidenav"/>
<body>
<sidenav></sidenav>
<div n:slot>
<!--All the subroutes will be rendered inside this folder.
Anything outside it will be rendered for any sub-route within '/dashboard' route-->
</div>
</body>
<!-- src/pages/dashboard/index.nijor -->
<!-- page will be rendered when route is /dasboard -->
<body>
<div>
<h1>Welcome to Dasboard Page</h1>
</div>
</body>
<!-- src/pages/dashboard/profile.nijor -->
<!-- page will be rendered when route is /dasboard/profile -->
<body>
<div>
<h1>Welcome to Profile Page</h1>
</div>
</body>
Nijor supports parameterized routes, allowing for variable paths within routes. To define a parameterized route, enclose the parameter(s) using square brackets while naming your file ( e.g [parameter-name].nijor ). You can add any desired text before or after the parameter name. For example: @[user].nijor, [item].nijor, id-[x].nijor, etc.
Let's explore parameterized routes with an example:
Suppose we are building a profile page for users on our site, and we want to render the profile of 'rudra' when accessing the '/@rudra' route. Similarly, we want to display the profile of 'parvati' for the '/@parvati' route, and so on. We'll create a single file pages/@[user]/index.nijor
<body params="{user}"> <!-- You can use 'props' instead of 'params' but 'params' is recommended -->
<div>
<h1>Hi {user}</h1>
<!--
If the user visits /@rudra <h1>Hi {user}</h1> will become <h1>Hi rudra</h1>
If the user visits /@parvati <h1>Hi {user}</h1> will become <h1>Hi parvati</h1>
-->
</div>
</body>