Routing component, but It does't mount component. It's just resolver.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.babelrc
.gitignore
.travis.yml
LICENSE
README.md
package.json

README.md

react-routing-resolver Build Status

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

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

  • path: current path(path is same format with location.pathname
  • onHistoryChange: call the handler when the history is changed.

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.

<Router path="/path/to/name" onHistoryChange={onHistoryChange}>
    <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.
<Router>
    {/* `<Route>` should be in `<Router />` */}
    <Route pattern="/view/:id" onMatch={onViewChange}/>
</Router>

Example of <Router> and <Route>

import {Router, Route} from "react-routing-resolver";
// pass `:id` as parameters object
const onViewChange = ({ id }) => {

};
// not match any
const onMatchOther = () => {
};

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

See __test__ for more details.

Reference

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

License

MIT © azu