capybara-router

capybara-router

This is a react router without flux and redux.
We just want a simple way to build a Single Page Application.

Installation

npm install capybara-router --save

Live demo

https://kelp404.github.io/capybara-router/

Example

/example

const React = require('react');
const ReactDOM = require('react-dom');
const {Router, RouterView} = require('capybara-router');
const history = require('history');
const axios = require('axios');

const ErrorPage = props => {
  return <h2 className="text-center">{`${props.error}`}</h2>;
};
const Home = props => {
  return <h2>Home</h2>;
};

const router = new Router({
  history: history.createBrowserHistory(),
  routes: [
    {
      name: 'web',
      uri: '/',
      onEnter: props => {
        document.title = 'Home';
      },
      resolve: {
        data: params => {
          return axios({
            method: 'get',
            url: `/data/${params.id}.json`
          }).then((response) => {
            return response.data;
          });
        }
      },
      component: Home
    }
  ],
  errorComponent: ErrorPage
});
router.start();

const element = (
  <RouterView>
    <p className="text-center text-muted h3" style={{padding: '20px 0'}}>
      <i className="fa fa-spinner fa-pulse fa-fw"></i> Loading...
    </p>
  </RouterView>
);
ReactDOM.render(element, document.getElementById('root'));

Commands

• npm start
  Run the debug server on localhost.
• npm run build
  Build the source code, test scripts and the example app.
• npm test
  Build test scripts and run tests.

Router

constructor

Generate a instance of Router with your options.

const {Router} = require('capybara-router');
const axios = require('axios');
const history = require('history');

const router = new Router({
  history: history.createBrowserHistory(),
  routes: [
    {
      name: 'web',
      uri: '/',
      isAbstract: false,
      onEnter: props => {
        document.title = 'Web';
      },
      resolve: {
        data: axios({
          method: 'get',
          url: '/data.json'
        }).then(response => response.data)
      },
      component: props => (<p>{JSON.stringify(props.data)}</p>)
    }
  ],
  errorComponent: props => (<h2>Error</h2>)
});

Parameter options.history

Type: Object
Required: required
Please provide history object.

Parameter options.errorComponent

Type: Object
Required: required
The React component for the error page.

Parameter options.routes

Type: Array<Object>
Required: required

Parameter options.routes[].name

Type: String
Required: required
The name of this route.
Use . to make the child route.
Such as web, web.project, web.project.members.

Parameter options.routes[].uri

Type: String
Required: required
The URI of this route.
It support the regular expression.
/users/{userId:[\\w-]{20}} will parse the user id from URL.
.* will match all URL. Use it to define the 404 page.

Parameter options.routes[].isAbstract

Type: Boolean
Default: false
The URI of this route.
An abstract state can have child states but cannot get activated itself. An 'abstract' state is simply a state that can't be transitioned to.

Parameter options.routes[].onEnter

Type: Function (props) => {}
Required: optional
capybara-route will call this function before the component.

Parameter options.routes[].resolve

Type: Object
Required: optional
Define how to fetch data.

Parameter options.routes[].component

Type: Object
Required: required
The React component.

---

start()

Start dispatch routes.

---

reload()

Reload the root router view.

---

go(target, options = {})

Push a state to the history or Replace a state of the history.
If the new URI and the old one are same, it will reload the current page.

Parameter target

Type: String|Object
Required: required
The destination.
String: The target is the URI.
Object:

{
  name: {String},  // The route name.
  params: {Object} // The parameter of the route.
}

Parameter options

Type: Object
Required: optional

Parameter options.replace

Type: Boolean
Default: false
Replace the current state with the new one.

Parameter options.reload

Type: Boolean
Default: false
Reload the root router view.

---

listen(event, callback)

Listen the change event.

Parameter event

Type: String
The event type.
ChangeStart, ChangeSuccess, ChangeError

Parameter callback

Type: Function
The callback function.
ChangeStart: (action, toState, fromState, cancel) => {}
ChangeSuccess: (action, toState, fromState) => {}
ChangeError: (error) => {}

Return

Type: Function
Call this function to stop the listen.

Components

RouterView

The router will replace the loading view with the page component.

const {RouterView} = require('capybara-router');

<RouterView>
  <p className="text-center text-muted h3" style={{padding: '20px 0'}}>
    <i className="fa fa-spinner fa-pulse fa-fw"></i> Loading...
  </p>
</RouterView>

Link

Render a SPA link element.

const {Link} = require('capybara-router');

<Link to={`/users/${user.id}`}>{user.id}</Link>
<Link to={{name: 'route-name', params: {paramKey: 'value'}}}>link</Link>