Routing component. It's just resolver.
MIT License
React Routing component, but it does't mount component. Instead of, It just resolve routing.
Install with npm:
npm install react-routing-resolver
use <Router>
and <Route>
for declarative routing.
<Router>
component<Router>
component is a parent of <Route>
component.
<Router>
<Route />
<Route />
<Route />
</Router>
<Router>
propshistory
: a instance of history package
history.location.pathname
at all timesWhen 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>
propspattern
: path pattern string
*
is special symbol. This pattern is matched when other pattern is not matched.onMatch
: register onMatch
handler that is called the pattern
is match.
onMatch
handler.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>
<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.
See Releases page.
Install devDependencies and Run npm test
:
npm i -d && npm test
Pull requests and stars are always welcome.
For bugs and feature requests, please create an issue.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
MIT azu