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.

Reference

• tj/react-enroute: React router with a small footprint for modern browsers
• lapwinglabs/enroute: tiny functional router
• You might not need React Router
  • It is similar approach.

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

npm i -d && npm test

Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, please create an issue.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

• github/azu
• twitter/azu_re

License

MIT © azu