addRoute

Add a new route to your app. If you want to render a template when the route is loaded you must return a function that returns your template. If you want to know more about the route types you can read core concepts/static routes and core concepts/dynamic routes

You can use the addRoute() method to add a route in your router.

import Router from "yourrouter";

const router = Router.get()

router.addRoute("/", () => {
  console.log("Hello world");
});

Complete example

src/index.js

import Router from "yourrouter";

const config = {
  path404: "/notFound",
};

const router = Router.create(config);

router.addRoute("/", () => {
  console.log("welcome to the main route!");
});

router.addRoute("/foo", () => {
  console.log("welcome to the foo route!");
});

With template rendering

See Core concepts/template rendering to know more about template rendering.

note

To active the template rendering you should set the renderId in your Router config.

Create your template.

src/templates/Home.js

export const Home = () => {
  // template logic

  const view = `
    <p>Home page!</p>
  `;
  return view;
};

Add a route for render your template.

src/index.js

import Router from "yourrouter";
import { Home } from "src/templates/Home"; // template to load

Router.create({
  path404: "/notFound",
  renderId: "#app", // or you can use a css class with .app
});
const router = Router.get();

router.addRoute("/", () => {
  console.log("Home page");

  return Home; // You must return a function
});