# super-simple-react-router

> A simple, yet powerful router for react.

Latest version **1.1.9** (published 2017-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install super-simple-react-router
pnpm add super-simple-react-router
yarn add super-simple-react-router
bun add super-simple-react-router
```

## 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.9 |
| Published | 2017-09-20 |
| First published | 2017-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mitch Mybrugh |
| Maintainers | mitchmyburgh |
| Keywords | react, router, simple, jsx |

## Links

- npm: https://www.npmjs.com/package/super-simple-react-router
- Repository: https://github.com/mitchmyburgh/super-simple-react-router
- Homepage: https://github.com/mitchmyburgh/super-simple-react-router#readme
- Issues: https://github.com/mitchmyburgh/super-simple-react-router/issues
- npm.io page: https://npm.io/package/super-simple-react-router

## Dependencies (4)

- [react](https://npm.io/package/react.md) 15.6.1
- [history](https://npm.io/package/history.md) 4.6.3
- [url-match](https://npm.io/package/url-match.md) 0.1.0
- [prop-types](https://npm.io/package/prop-types.md) 15.5.10

## 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.9 (latest) — 2017-09-20
- 1.1.8 — 2017-09-20
- 1.1.7 — 2017-09-20
- 1.1.6 — 2017-09-20
- 1.1.5 — 2017-09-20
- 1.1.4 — 2017-07-30
- 1.1.3 — 2017-07-30
- 1.1.2 — 2017-07-30
- 1.1.0 — 2017-07-30
- 1.0.2 — 2017-07-30
- 1.0.1 — 2017-07-30
- 1.0.0 — 2017-07-30

## README

# super-simple-react-router
A simple, yet powerful router for react. The router is configured with simple json, but handles parents, middleware, passing props and handles multiple components per route.

# Install
```
npm i super-simple-react-router
```

# Example

Checkout the demo repo at: [https://github.com/mitchmyburgh/super-simple-react-router-demo](https://github.com/mitchmyburgh/super-simple-react-router-demo)

```JavaScript
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Router, {Link} from 'super-simple-react-router';

var store = {
  user: true
}
class Comp extends Component {
  render() {
    //console.log(this.props);
    let {title} = this.props;
    //console.log(this.props)
    return (
      <div>{title}<Link href="/sam" externalLink={false}>Sam</Link></div>
    );
  }
}

//Props precedence: component props, route props, prant props
export var parents = {
  base: {
    components: {
      header: {component: Comp, props: {title: "Header Base Parent"}}, //rendered 1st
      sidebar: {component: Comp, props: {title: "Sidebar Base Parent"}}, //redndered 2nd
      notification: {component: Comp, props: {title: "Notification Base Parent"}}, //rendered 3rd
      body: {component: Comp, props: {title: "Body Base Parent"}}, //rendered 4th
      footer: {component: Comp, props: {title: "Footer Base Parent"}},//rendered last
      other: [ //rendered 5th
        {component: Comp, props: {title: "Other 1 Base Parent"}},
        {component: Comp, props: {title: "Other 2 Base Parent"}}
      ]
    },
    middleware: [
      (redirect, path, props) => {
        return true;
      }
    ],
    props: {
      a: 1,
      b: 2,
      store
    }
  }
}
export var routes = [
  {
    path: '/',
    components: {
      body: {component: Comp, props: {title: "Body / route"}}, //replaces parent body
      other: [ //replaces all other components in teh parents
        {component: Comp, props: {title: "Other 1 / route"}}
      ]
    },
    parent: 'base',
    middleware: [ // called after parent middleware
      (redirect, router, props) => {
        //redirect('/login?test=12', false);
        return true;//return false to block access to the route
      }
    ],
    props: { //a will overwrite value from parent
      a: 3,
      c: 4,
      store,
      title: "test"
    }
  },
  {
    path: '/login',
    components: {
      body: {component: Comp, props: {title: "Body /login route"}},
    },
    parent: 'base',
    middleware: [
      (redirect, router, props) => {
        return true;
      }
    ],
    props: {
      store
    }
  },
  {
    path: '/sam/:n',
    components: {
      body: {component: Comp, props: {title: "Sam"}},
    }
  },
]

//Does not execute any middleware, not even the parents
export var catchall = {
  components: {
    body: {component: Comp, props: {title: "Catch all"}},
  },
  parent: 'base',
  props: {
    store
  }
}


ReactDOM.render(<Router parents={parents} routes={routes} catchall={catchall} hash={false}/>, document.getElementById('root'));
```

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