# easy-routing

> Easily create a navigable page with simple routing/rendering.

Latest version **1.0.17** (published 2018-03-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install easy-routing
pnpm add easy-routing
yarn add easy-routing
bun add easy-routing
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.17 |
| Published | 2018-03-24 |
| First published | 2017-11-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gunner Spencer |
| Maintainers | gunnerspencer |

## Links

- npm: https://www.npmjs.com/package/easy-routing
- Repository: https://github.com/thegunner686/easy-routing
- Homepage: https://github.com/thegunner686/easy-routing#readme
- Issues: https://github.com/thegunner686/easy-routing/issues
- npm.io page: https://npm.io/package/easy-routing

## Dependencies (3)

- [flux](https://npm.io/package/flux.md) ^3.1.3
- [react](https://npm.io/package/react.md) ^16.1.1
- [events](https://npm.io/package/events.md) ^1.1.1

## Recent versions

- 1.0.17 (latest) — 2018-03-24
- 1.1.2 — 2018-01-15
- 1.1.1 — 2018-01-15
- 1.0.16 — 2018-01-15
- 1.0.15 — 2017-11-16
- 1.0.14 — 2017-11-16
- 1.0.13 — 2017-11-16
- 1.0.12 — 2017-11-16
- 1.0.11 — 2017-11-16
- 1.0.10 — 2017-11-16
- 1.0.9 — 2017-11-16
- 1.0.8 — 2017-11-16
- 1.0.7 — 2017-11-16
- 1.0.6 — 2017-11-16
- 1.0.5 — 2017-11-16
- … 5 more at https://npm.io/package/easy-routing/versions

## README

# easy-routing
Easily create a navigable page with simple routing/rendering.

### Install
`npm install easy-routing --save`

### Usage

```
let {
  Link,
  ClassicLink,
  OpacityLink,
  IndexRoute,
  Route,
  RouteTo,
} = require("easy-routing");
```

#### Rules for family, path, to, in

1. Routes are defined by a `path` and a `family`. These are both strings.
2. A `path` should be unique to its family.
3. Only one member of a `family` can be rendered at one time. 
4. The `path` prop must be supplied or else there will be an error, but the `family` prop will default to `""` if not supplied, making it a global route.

`to` and `in` act the same as `path` and `family` respectively, except these are the props supplied to the `<Link/>` instead of the `<Route/>`

#### Link, ClassicLink, OpacityLink

```
<Link to="/About" in="MainPage" className="page-link" onClick={this.linkClicked.bind(this)}>
  About Page
</Link>
```

Link provides no built-in styles, only the routing functionality. You can pass the `className` to style the Link (rendered as a div with its children) and the `onClick` prop to trigger a separate action when the Link is pressed, besides the normal routing.

ClassicLink does all that a Link does except it is rendered as an `<a>` tag to give the style and feel of a regular hyperlink.

OpacityLink does all that a Link does except it triggers a small ease opacity animation.

#### Route, IndexRoute

```
 <Route path="/About" family="MainPage">
  <AboutPage/>
 </Route>
```

The Route defines the space where the child components will only be rendered when routed to. The Route does not itself render an HTML element (like the Links do), but instead renders the children or nothing at all (depending on if it is visible).

IndexRoute works the same as the Route except it renders initially.

#### RouteTo

`RouteTo(path, family)`

Use RouteTo to trigger the same action as when pressing a `<Link>`. This function allows you to construct your own program flow for routing instead of relying entirely on the built-in link components.


#### Example
```
  let React = require("react");
  let {
    Link,
    IndexRoute,
    Route
  } = require("easy-routing");
  
 let HomeContent = require("./HomeContent"),
     AboutContent = require("./AboutContent");
  
  class NavigationBar extends React.Component {
    render() {
      return (
        <div>
          <Link to="/" in="body-content">Home Screen</Link>
          <Link to="/about" in="body-content">About Screen</Link>
        </div>
      );
    }
  }
  
  class MainContent extends React.Component {
    render() {
      return (
        <div>
          <NavigationBar/>
          <IndexRoute path="/" family="body-content">
            <HomeContent/>
          </IndexRoute>
          <Route path="/about" family="body-content">
             <AboutContent/>
          </Route>
        </div>
      );
    }
  }
```

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