React-routing-resolver NPM

react-routing-resolver

React Routing component, but it does't mount component. Instead of, It just resolve routing.

Features

Tiny Routing library
Not mount, but resolve path
Support TypeScript

Install

Install with npm:

npm install react-routing-resolver

Usage

Overview components

use <Router> and <Route> for declarative routing.

`<Router>` component

<Router> component is a parent of <Route> component.

<Router>
    <Route />
    <Route />
    <Route />
</Router>

`<Router>` props

history: a instance of history package
- the location path is history.location.pathname at all times

When the path is change, this library change the browser history by history.pushState. And if the path match <Route pattern={pattern} onMatch={onMatch}>, call the onMatch handler.

import createHistory from "history/createBrowserHistory";
const history = createHistory();
<Router history={history}>
    <Route pattern="/view/:id" onMatch={onViewChange}/>
    <Route pattern="*" onMatch={onMatchOther}/>
</Router>;

`<Route>` props

pattern: path pattern string
- pattern is used of Path-to-RegExp
- * is special symbol. This pattern is matched when other pattern is not matched.
onMatch: register onMatch handler that is called the pattern is match.
- When used Named Parameters, pass the parameters object to onMatch handler.
render: render function can return React Node for redering when match the pattern.
- Render Props - React

<Router {...props}>
    {/* `<Route>` should be in `<Router />` */}
    <Route pattern="/view/:id" onMatch={onViewChange}/>
</Router>

<Router {...props}>
    {/* `<Route>` should be in `<Router />` */}
    <Route pattern="/user/:name" onMatch={onViewChange} render={({ name }) => <h1>{name}</h1}/>
</Router>

Example of `<Router>` and `<Route>`

import createHistory from "history/createBrowserHistory";
const history = createHistory();
import {Router, Route} from "react-routing-resolver";
// pass `:id` as parameters object
const onViewChange = ({ id }) => {
  
};
// not match any
const onMatchOther = () => {
};

<Router history={history}>
    <Route pattern="/view/:id" onMatch={onViewChange}/>
    <Route pattern="*" onMatch={onMatchOther}/>
</Router>;

See __test__ for more details.