Based on the URL of the link used in the browser, this will route to content-related.
It is a very important mechanism for building websites using the XSO framework, it changes the content related to the link without a page refresh.
Changes the link and the content dynamically, preserving the page state and avoiding page refresh.
Works like other implementations found in React, Vue, Angular, Svelte, and more.
Here is the official website with the full documentation:
To start playing with XSO COM:
npm install -S @xso/router
But better, is to use the PNPM:
pnpm install @xso/router
Or if you prefer Yarn:
yarn add -S @xso/router
Or even another package manager.
Example of the capabilities supported in the XSO router:
App.js
import com from "@xso/com";
import { Router, Route } from "@xso/router";
function Main() {
this.view(()=> [
{ main: {
_: [
{ [Router]: {
routes: [
{ [Route]: {
path: '/',
component: Home
} },
{ [Route]: {
path: '/product/{uid}/{name}',
component: Product
} }
]
} } // Router
]
} } // Main
]);
}
export default com(Main);Here is an example of how to create a page component receiving parameters from the URL:
pages/Product/index.js
import com from "@xso/com";
function Product({route}) {
this.view(() => [
{ h3: {
_: `Router Parameters`
} },
{ p: {
_: `UID: ${route.params.uid}`
} },
{ p: {
_: `Name: ${route.params.name}`
} }
]);
}
export default com(Product);The Navigate component creates a link in the DOM using the <a> element, it is easy to create links in the page and menus.
Here is an example of how to use it:
import com from "@xso/com";
import { Navigate } from "@xso/router";
function Link() {
this.view(()=> [
{ [Navigate]: {
to: '/my/page',
onClick: () => alert('Going to My Page...'),
_: 'To My Page'
} }
]);
}
export default com(Link);Using the navigateTo is the way to change the page link programmatically, here is an example:
import com from "@xso/com";
import { navigateTo } from "@xso/router";
function Main() {
const counter = this.state(0);
this.changes([counter], () => {
navigateTo(`/product/${counter.val}`);
});
this.view(()=> [
{ a: {
onClick: ()=> navigateTo('/'),
_: 'Link to Home'
} },
{ button: {
onClick: ()=> counter.$val++,
_: `Click me! ${counter.val}`,
} }
]);
}
export default com(Main);