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 a very important file inside the src/
directory of a Nijor project. This page gets rendered before rendering any route in Nijor. 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.
<template>
<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. -->
</template>
In order to use the Nijor Router in your project, your src/App.js file must contain the following Boilerplate code :
<template>
<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. -->
</template>
import 'nijor';
import 'nijor/router';
import App from 'App.nijor';
//@Routes()
App.init('app');
App.run();
let url = window.location.pathname;
window.nijor.renderRoute(url);
Note: The //@Routes()
comment is crucial for the Nijor router to function properly. Please ensure that there is no code or comments written on the same line as this comment.
Nijor supports parameterized routes, allowing for variable paths within routes. To define a parameterized route, enclose the parameter(s) using square brackets, e.g., [parameter-name]. 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 'Arun' when accessing the '/@arun' route. Similarly, we want to display the profile of 'Himasri' for the '/@himasri' route, and so on. Instead of creating separate files for each user, such as src/pages/@arun
, src/pages/@himasri
, and thousands of other profiles, we can create a single file, src/pages/@[user].nijor
to handle all user profiles. This way, when a user visits routes like '/@himasri' or '/@arun', they will be directed to the same page, src/pages/@[user].nijor
.
File : src/pages/@[user]
<template specs=[user]> <!-- Receiving the parameterised route by array destructuring in specs -->
<div>
<h1>Hi {user}</h1>
<!--
If the user visits /@arun <h1>Hi {user}</h1> will become <h1>Hi arun</h1>
If the user visits /@himasri <h1>Hi {user}</h1> will become <h1>Hi himasri</h1>
-->
</div>
</template>
By sub routes, we mean routing within a parent route.
For instance, there is a route say, /blog
which has some sub-routes like /blog/What-is-Nijor
, /blog/Learning-Nijor
, 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. You can also have parameterized routes as subroutes within a route.
In order to create a sub route within a route :
(1) Create a folder, say 'blog' inside the src/pages directory.
(2) Create the .nijor
file within it. (write .nijor the way you write .gitignore).
(3) Create index.nijor
file within the folder.
(4) Create What-is-Nijor.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 '/blog' route. Whenever somebody visits '/blog/*', this page will get rendered.
File : src/pages/@[user]
<template specs=[user]> <!-- Receiving the parameterised route by array destructuring in specs -->
<div>
<h1>Hi {user}</h1>
<!--
If the user visits /@arun <h1>Hi {user}</h1> will become <h1>Hi arun</h1>
If the user visits /@himasri <h1>Hi {user}</h1> will become <h1>Hi himasri</h1>
-->
</div>
</template>
<sidenav n:imported="components/sidenav"/>
<template>
<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 '/blog' route-->
</div>
</template>