https://github.com/marvinhagemeister/preact-simple-router

Simple router for preact
https://github.com/marvinhagemeister/preact-simple-router

preact rlite router simple tiny

Last synced: 27 days ago
JSON representation

Simple router for preact

• Host: GitHub
• URL: https://github.com/marvinhagemeister/preact-simple-router
• Owner: marvinhagemeister
• License: mit
• Created: 2017-11-02T09:47:06.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-03T11:05:08.000Z (almost 7 years ago)
• Last Synced: 2024-10-17T21:44:44.551Z (27 days ago)
• Topics: preact, rlite, router, simple, tiny
• Language: TypeScript
• Homepage:
• Size: 142 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Preact Simple Router

A simple router for [preact](https://github.com/developit/preact/) based on

[rlite](https://github.com/chrisdavies/rlite) that can load both sync and async

routes.

**Note:** Although it works I'm currently not happy with the api and will likely

change the internals quite a bit to allow easier testing. Treat this package

as alpha!

## Installation

```bash

# npm

npm install --save preact preact-simple-router

# yarn

yarn add preact preact-simple-router

```

## Usage

```jsx

import { h } from "preact";

import { Router}  from "preact-simple-router";

const routes = {

  "/": () => import("./MyHomeComponent").then(m => m.default()),

  "/about": () => import("./About").then(m => m.default()),

  // Passing :name to component

  "/blog/:name": (args) => import("./MyBlogPost").then(m => m.default(args.name)),

   // Will be automatically used as error route

  "/404": () => import("../404").then(m => m.default()),

};

export default function App() {

  return  "Loading failed"} // if network is down, etc

    error={err => "failed " + err.message} // if an unknown error occured

  />;

}

```

Linking to other routes (the `url` must be **absolute**!):

```jsx

import { h } from "preact";

import { Link}  from "preact-simple-router";

export default function App() {

  return 


    

      My First Blog Post

    

  
;

}

```


## License

`MIT`, see [License file](LICENSE.md).