Routing component but It does't mount component

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.

GitHub