# react-router-fetch-data

> Fetch data router for React-Router v4

Latest version **1.1.0** (published 2016-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-fetch-data
pnpm add react-router-fetch-data
yarn add react-router-fetch-data
bun add react-router-fetch-data
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2016-09-18 |
| First published | 2016-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Author | mrcheater |
| Maintainers | mrcheater |
| Keywords | react, router, react-router, fetch, data, ajax |

## Links

- npm: https://www.npmjs.com/package/react-router-fetch-data
- Repository: https://github.com/MrCheater/react-router-fetch-data
- Homepage: https://github.com/MrCheater/react-router-fetch-data#readme
- Issues: https://github.com/MrCheater/react-router-fetch-data/issues
- npm.io page: https://npm.io/package/react-router-fetch-data

## Dependencies (1)

- [react-router](https://npm.io/package/react-router.md) ^4.0.0-2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2016-09-18
- 1.0.4 — 2016-09-18
- 1.0.3 — 2016-09-17
- 1.0.2 — 2016-09-17
- 1.0.1 — 2016-09-17
- 1.0.0 — 2016-09-17

## README

# react-router-fetch-data
Fetch data router for React-Router v4

* Fetch data in correct order from API
* Using standard "matchPattern" from "react-router"
* Declarative
* Only Server Side

##Fetch data router:
```javascript
import { fetchDataRouter, Match } from 'react-router-fetch-data';

const resolveFetchData = fetchDataRouter(
    <Match pattern = '/'             on = {actionCreators.fetchUser}/>,
    <Match pattern = '/'             on = {actionCreators.fetchForAll}/>,
    <Match pattern = '/app/'         on = {actionCreators.fetchApp} exactly = {true}/>,
    <Match pattern = '/app/config'   on = {actionCreators.fetchAppConfig}/>,
    <Match pattern = '/app/config/1' on = {actionCreators.fetchAppConfig1}/>,
    <Match pattern = '/app/:id'      on = {actionCreators.fetchForAllInApp}/>,
    <Match pattern = '/app/test'     on = {actionCreators.fetchAppTest}/>,
    <Match pattern = '/about'        on = {actionCreators.fetchAbout}/>,
);

``` 
or
```javascript
const resolveFetchData = fetchDataRouter(
    {pattern: '/',             onMatch: actionCreators.fetchUser                     },
    {pattern: '/',             onMatch: actionCreators.fetchForAll                   },
    {pattern: '/app/',         onMatch: actionCreators.fetchApp,        exactly: true},
    {pattern: '/app/config',   onMatch: actionCreators.fetchAppConfig                },
    {pattern: '/app/config/1', onMatch: actionCreators.fetchAppConfig1               },
    {pattern: '/app/:id',      onMatch: actionCreators.fetchForAllInApp              },
    {pattern: '/app/test',     onMatch: actionCreators.fetchAppTest                  },
    {pattern: '/about',        onMatch: actionCreators.fetchAbout                    }
);
```

##Resolve fetch data -> Render
```javascript
function handler(req, res) {
    //...
    resolveFetchData(req.url).then((errors) => {
        //fetch-data errors/rejects 
        if(errors.length > 0) {
            console.warn(...errors);
        }
        const markup = ReactDOMServer.renderToStaticMarkup(
            <App/>
        );
        
        res.end(markup);
    });
}

```

##Function signature Match.on  
```javascript
fetchExampleData({ params: Object, isExact: Boolean, pathname: String }) {
    //..
    return promise;
}
```

---
_Source: https://npm.io/package/react-router-fetch-data · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._