Routing component. It's just resolver.
TypeScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
.travis.yml
LICENSE
README.md
package.json
tsconfig.json
tsconfig.test.json
yarn.lock

README.md

react-routing-resolver Build Status

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.
  • render: render function can return React Node for redering when match the pattern.
<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

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