https://github.com/huang2002/hele-router

Declarative routing for hele.
https://github.com/huang2002/hele-router

3h declarative hash hele history link route router routing switch

Last synced: about 4 hours ago
JSON representation

Declarative routing for hele.

• Host: GitHub
• URL: https://github.com/huang2002/hele-router
• Owner: huang2002
• License: mit
• Created: 2018-09-01T11:34:51.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-01T11:34:59.000Z (about 6 years ago)
• Last Synced: 2024-10-29T02:39:08.280Z (17 days ago)
• Topics: 3h, declarative, hash, hele, history, link, route, router, routing, switch
• Language: TypeScript
• Size: 20.5 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hele-router

Declarative routing for hele.

# Usage

```jsx

// If you use this lib as a UMD module, please access the APIs via the `HEle` global.

import { HistoryRouter, HashRouter, Switch, Route, Link } from "hele-router";

import { render, createElement, Fragment } from "hele";

const Greeting = () => 
Welcome!
;


render(

    (

        

            {/* You can pass a `name` prop to a router to specify the name that it

            stores itself in the context and pass the same value as `router` props

            to links and routes to let them access that router. */}

            {/* A history router uses the `history` APIs to route. It accepts a

            `noHash` prop which is a boolean telling whether to preserve the hash

            representing location. (Default: true) */}

            

                
My App

                {/* matched = exact ? path === props.path : path.includes(props.path) */}

                {/* Rendering priority: `component` > `render` > children */}

                {/* `component` and children will only be rendered when matched. */}

                

                 matched && 
foo
} />

                

                    
bar

                

                {/* A link renders an anchor element. So, treat it as an anchor tag

                except that you can set `back` to true to declare a back link. */}

                Home

                foo

                bar

                back

            

            {/* A hash router uses the hash of the location to route. */}

            

                {/* ... */}

            

            {/* A switch router won't change the location of the document. It

            stores its own location. So, it accepts a `path` prop representing

            its default path. (Default: '/') */}

            

                {/* ... */}

            

        

    ),

    document.getElementById('root')

);

```


# Changelog

See [CHANGELOG.md](CHANGELOG.md)