https://github.com/kelp404/capybara-router
Unfancy react router without flux and redux.
https://github.com/kelp404/capybara-router
react router
Last synced: 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 (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);
return Home
;
};
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/)