Code Monkey home page Code Monkey logo

karet.router's Introduction

Karet Router

Routing component for use with Karet.

npm version Build Status codecov

Usage

// app.js
import React from 'karet';
import { Router } from 'karet.router';
import { render } from 'react-dom';

const routes = {
  '/': () =>
    <div>Root page</div>,

  '/subpage': () =>
    <div>Sub-route</div>,

  '/with-params/:id': ({ params }) =>
    <div>Route with ID {params.id}</div>
};

const App = () => <Router routes={routes} />

render(
  <App />,
  document.getElementById('root'));

karet.router's People

Contributors

stuf avatar

Stargazers

Andrejs Agejevs avatar Vesa Karvonen avatar Kurt Milam avatar Petri Kola avatar

Watchers

 avatar James Cloos avatar  avatar

Forkers

jsfix-ci

karet.router's Issues

Allow nesting of routes

Currently routing only works on a single "level" of routing, not allowing nested routing.

const routes = {
  '/': Component1,
  '/page': Component2,
  '/page/:id': Component3
};

It would be beneficial to get nested routing (something similar to how react-router does with its Route component), as it will help avoiding unnecessarily unmounting and remounting a shared root route.

So something along the lines of this could be nice:

const routes = {
  '/': Component1,
  '/page': [
    Component2, {
      '/:id': Component3
    }]
};

Or, in a pseudo-react-router style:

const routes = (
  <Route path="/" component={Component1}>
    <Route path="/page" component={Component2}>
      <Route path="/:id" component={Component3} />
    </Route>
  </Route>
);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.