# react-routsy

> Tiny React component for routing on individual pages

Latest version **1.2.4** (published 2015-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-routsy
pnpm add react-routsy
yarn add react-routsy
bun add react-routsy
```

## 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.2.4 |
| Published | 2015-05-28 |
| First published | 2015-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | laurelandwolf |
| Maintainers | scottcorgan, michaelgraham |
| Keywords | react, router |

## Links

- npm: https://www.npmjs.com/package/react-routsy
- Repository: https://github.com/laurelandwolf/react-routsy
- Homepage: https://github.com/laurelandwolf/react-routsy#readme
- Issues: https://github.com/laurelandwolf/react-routsy/issues
- npm.io page: https://npm.io/package/react-routsy

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^3.9.1
- [object-assign](https://npm.io/package/object-assign.md) ^2.0.0
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^1.1.1

## 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.2.4 (latest) — 2015-05-28
- 1.2.3 — 2015-05-27
- 1.2.2 — 2015-05-27
- 1.2.1 — 2015-05-27
- 1.2.0 — 2015-05-26
- 1.1.0 — 2015-05-23
- 1.0.4 — 2015-05-22
- 1.0.3 — 2015-05-20
- 1.0.2 — 2015-05-19
- 1.0.1 — 2015-05-19
- 1.0.0 — 2015-05-19

## README

# react-routsy
Tiny React component for routing on individual pages

## Install

```
npm install react-router --save
```

## Usage

```js
import React, {Component, render} from 'react';
import {Route, navigateTo, Link} from 'react-routsy';

class CustomComponent extends Component {

  go () {

    navigateTo('/do-this');
  }
 
  handlerRender () {
    
  }

  render () {

    return (
      <div>
        <Route path='/do-this'>
          <div>This gets rendered only when the path matches</div>
        </Route>
        <Route path='/users/:id'>
          <p onClick={this.go.bind(this)}>
            This is renedered with id available on {this.props.router.params.id}.

            This is also available on child component props.
          </p>
        </Route>
        <Route path='/' willRender={this.handleRender.bind(this)}>
          This gets rendered when the hash is #/ or #
          <Link path='/do-this' activeClassName='this-is-active'>
          	Go Here
          </Link>
        </Route>
      </div>
    );
  }
}

render(<CustomComponent />, document.body);
```

## Route Props

### path

type: *String*

The path that should trigger the rendering of the Route component. All routes are hash-based, so `/` as a path is equal to `#/` in the hash.

### paramsAsProps

type: *Object*

Takes and object and maps keys and objects in the route params to specified keys, and then passes them in the children component's props. This is useful in decoupling components from the router.

```js

let paramsMap = {
  id: 'somePropName'
};

<Route path="/users/:id" paramsAsProps={paramsMap}>
  <CustomComponent />
</Route>
```

`this.props.somePropName` is now available when defining `<CustomComponent />`.

### willRender

type: *Function*

Takes a callback that gets triggered when path matches route. This is useful if you need to redirect, etc.

## Link Props

### path

type: *String*

Path to navigate to.

### activeClassName

type: *String*

Class name to set when the link's path matches the current route path.

### activeStyle

type: *Object*

Inline style object to set on link when the link's path matches the current route path.

## Run Tests

```
npm install
npm test
```

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