Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitrydivin/react-router-flux
Extension for react-router
https://github.com/dmitrydivin/react-router-flux
flux-architecture javascript react react-router
Last synced: about 1 month ago
JSON representation
Extension for react-router
- Host: GitHub
- URL: https://github.com/dmitrydivin/react-router-flux
- Owner: dmitrydivin
- License: mit
- Created: 2017-02-22T19:43:09.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-22T20:52:12.000Z (almost 8 years ago)
- Last Synced: 2024-10-24T12:14:48.612Z (about 2 months ago)
- Topics: flux-architecture, javascript, react, react-router
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Powerful extension for [react-router](https://github.com/ReactTraining/react-router) to declare routes.
### Installation
Using [npm](https://www.npmjs.com/):
```sh
$ npm install --save react-router-flux
```
And then you can import components as follows:
```javascript
// using an ES6 transpiler, like babel
import { Dispatcher, View, Action, Input } from 'react-router-flux';
// not using an ES6 transpiler
var Dispatcher = require('react-router-flux').Dispatcher;
var View = require('react-router-flux').View;
var Action = require('react-router-flux').Action;
var Input = require('react-router-flux').Input;
```
### Declare route dispatcher
```javascript
```
### Props
| Property | Type | Required | Description |
|:---------|:-------------|:---------|:------------------|
|component | `ReactClass` | yes | A React component |
### Declare view-state
The declaration can define in Dispatcher inside only
```javascript
```
### Props
| Property | Type | Required | Description |
|:---------|:--------|:---------|:--------------------|
|path | `String`| yes | Route path |
### Declare inbound parameter into view-state
The declaration can define in a View inside and in a Dispatcher too, but as default value and can be overridden.
```javascript
```
### Props
| Property | Type | Required | Description |
|:---------|:--------|:---------|:--------------------|
|name | `String`| yes | Input property name |
|value | `Any` | no | Input property value|
> **Note**: If the value define as Function you can access to route variables 'params', 'query' and 'state', see below example.
### Declare transition
The declaration can define in Dispatcher inside only
```javascript
```
### Props
| Property | Type | Required | Description |
|:---------|:-----------------------|:---------|:-----------------------------------------|
|on | `String` | yes | Event ID of the component |
|to | `String` | yes | Redirect Route path |
|query | `Function` or `Object` | no | Define query params for the Route path |
|state | `Function` or `Object` | no | Define route state for the Router |
|params | `Function` or `Object` | no | Define params for the Route path |
### How Does It Use?
```javascript
class TodoMVC extends React.Component {
render() {
let {
filter, /** filter parameter **/
onFilter, /** to go to /todomvc/active when onFilter({filter: 'active'}) **/
onFilterNotFound /** to go to /error/404 **/
} = this.props;
//...
}
};
//store filter variable as path parameter
// `/todomvc` ->
// `/todomvc/active` ->
const mapping_v1 = (
{/*as default value*/}
params.filter}/>
{ return {filter} }}/>
);
//store filter variable as path parameter v_2
// `/todomvc` ->
// `/todomvc/active` ->
const mapping_v2 = (
{ return {filter} }}/>
);
//store filter variable as query parameter
// `/todomvc` ->
// `/todomvc?filter=active` ->
const mapping_v3 = (
{/*as default value*/}
query.filter}/>
{ return {filter} }}/>
);
```
### License
MIT, © 2017 Dmitry Divin.