spaghetti-router

spaghetti-router

A simple user-friendly router library for your React application. It is written in TypeScript, but you can also use it in JavaScript projects.

Installation

Install using npm:

npm install spaghetti-router

Then with a module bundler like webpack, use as you would anything else:

// TypeScript
import React from "react";
import ReactDOM from "react-dom";
import { Router } from "spaghetti-router";

ReactDOM.render(<Router />, document.getElementById("root"));

// JavaScript
const React = require("react");
const SpaghettiRouter = require("spaghetti-router");

React.render(<SpaghettiRouter.Router />, document.getElementById("root"));

Usage

The basic working router looks like this:

// TypeScript
import React from "react";
import ReactDOM from "react-dom";
import { Router, IRoute } from "spaghetti-router";

const routePaths: Array<IRoute> = [
  {
    path: "/",
    component: HomeView,
  },
  {
    path: "/about",
    component: AboutView,
  },
  {
    path: "/user/:id", //work in progress
    component: UserView,
  },
];

class HomeView extends React.Component {
  render(): ReactNode {
    return <button onClick={() => Router.openView(<AboutView />)}>About</button>;
  }
}

ReactDOM.render(<Router routes={routePaths} />, document.getElementById("root"));

Navigation

Method	Description
Router.closeView()	Close the active view
Router.openComponent()	Open a new React component
Router.openUrl()	Open a new component with url
Router.openView()	Open a new JSX Element (type safety props)