https://github.com/kelp404/capybara-router
Unfancy react router without flux and redux.
https://github.com/kelp404/capybara-router
react router
Last synced: about 2 months ago
JSON representation
Unfancy react router without flux and redux.
- Host: GitHub
- URL: https://github.com/kelp404/capybara-router
- Owner: kelp404
- License: mit
- Created: 2018-08-03T07:28:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-05T08:24:16.000Z (about 2 years ago)
- Last Synced: 2025-04-11T15:27:43.070Z (about 2 months ago)
- Topics: react, router
- Language: JavaScript
- Homepage: https://kelp404.github.io/capybara-router/
- Size: 1.88 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# capybara-router
[](https://www.npmjs.com/package/capybara-router)
[](https://coveralls.io/github/kelp404/capybara-router)
[](https://github.com/kelp404/capybara-router/actions)
This is a react router without flux and redux.
We just want a simple way to build a Single Page Application.
Define rules that include the component and how to fetch data of the each page in a router.
## Installation
```bash
npm install capybara-router --save
```## Live demo
[https://kelp404.github.io/capybara-router/](https://kelp404.github.io/capybara-router/)## Example
[/example](/example)
```js
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{`${props.error}`}
;
};
const Home = props => {
console.log(props.data);
returnHome
;
};const router = new Router({
history: history.createBrowserHistory(),
routes: [
{
name: 'web',
uri: '/',
onEnter: props => {
document.title = 'Home';
},
resolve: {
data: params => axios({
method: 'get',
url: `/data/${params.id}.json`
}).then(response => response.data)
},
component: Home
}
],
errorComponent: ErrorPage
});const element = (
Loading...
);
ReactDOM.render(element, document.getElementById('root'));
```## Commands
+ `npm start`
Run the debug server on localhost:8000/capybara-router.
+ `npm run build`
Build the example app.
+ `npm test`
Build test scripts and run tests.## Router
### constructor
Generate a instance of Router with your config.
Just allow single instance in your application.
```js
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 => ({JSON.stringify(props.data)}
)
}
],
errorComponent: props => (Error
)
});
```
#### Parameter `options.history`
Type: `Object`
Required: `required`
Please provide [history](https://github.com/ReactTraining/history) object.#### Parameter `options.errorComponent`
Type: `Object`
Required: `required`
The React component for the error page.#### Parameter `options.routes`
Type: `Array`
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: `optional`
The React component.##### Parameter `options.routes[].loadComponent`
Type: `Function`
Required: `optional`
The lazy loading function.
Run the lazy loading function when the `.component` is null.
```js
{
name: 'web',
uri: '/path',
loadComponent: () => import(
/* webpackChunkName: "chunk-name" */
'./path/component'
)
}
```---
### 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, next) => {}
`ChangeSuccess`: (action, toState, fromState) => {}
`ChangeError`: (error) => {}#### Return
Type: `Function`
Call this function to stop the listen.---
### renderError(error)
Render the error component.#### Parameter `error`
Type: `Object`
The Error object.---
### getCurrentRoute()
Get the current route via router.history and router.routes.#### Return
Type: `Route`---
### findRouteByName(name)
Find the route by the route name.#### Parameter `name`
Type: `String`
The route name.#### Return
Type: `Route`## getRouter()
When the instance of Router was created.
This function returns the instance.
```js
const {getRouter} = require('capybara-router');
// new Router({ ... });
const router = getRouter();
```## Components
### RouterView
The router will replace the loading view with the page component.
```js
const {RouterView} = require('capybara-router');
```
```js
Loading...
```
### Link
Render a SPA link element.
```js
const {Link} = require('capybara-router');
```
```js
{user.id}
link
```## Which sites are using capybara-router?
- **Meetpet** [https://meetpet.org/](https://meetpet.org/)