npm package: @ryancole/router
Description: A simple router for react.
Latest version: 0.3.0

A simple router for React.

```
npm install @ryancole/router
```

`@ryancole/router` is a simple router for React. The main focus of the router is to function in a reliable and predictable manner in both client and server environments.

# Concepts

The main concept of the router is that routes are an up-front, static resource. The router operates on an array of route objects. You define your routes up front. You can take the requested URL and match it against your routes and get the exact route that should be rendered.

A route is intended to be thought of as a complete "page" or "view" to be rendered by React. The intention is that, when the URL pathname changes and this router finds the appropriate React component to render, the component being rendered is going to make up your complete application view so that you can simply call `ReactDOM.render` on the returned component.

There is no route nesting, like react-router v3, and there are no floating route components, like react-router v4. Because of this, there is a clear place to perform code splitting and asynchronous loading of split bundles.

```js
import {routes} from "@ryancole/router";

export default routes([
  {
    path: "/",
    loadComponent: () => System.import("../client/page/Home")
  },
  {
    path: "/team",
    loadComponent: () => System.import("../client/page/Teams")
  },
  {
    path: "/team/:slug",
    loadComponent: () => System.import("../client/page/Team")
  },
  {
    path: "*",
    isNotFound: true,
    loadComponent: () => System.import("../client/page/NotFound")
  }
]);
```

The router will provide the first route object that has a `path` that matches the requested URL pathname. The `path` may use express-style parameters.

A route object must specify a `loadComponent` function that returns the React component to be rendered when this route is matched. `loadComponent` should return a `Promise` that resolves to the loaded React component.

```js
import {match} from "@ryancole/router";
import createHistory from "history/createBrowserHistory";

const history = createHistory();

// on route change, re-render
history.listen(renderLocation);

function renderLocation(location) {
  const matched = match(location, routes);
  if (matched) {
    const {route} = matched;
    route.loadComponent(matched, history).then(Component => {
      ReactDOM.render(<Component />, destination);
    });
  }
}

// render current route
renderLocation(history.location);
```

The router will also check to see if the route's component has any data concerns and will fetch the necessary data. A React component can implement a static function called `getInitialProps` if it needs to have data fetched prior to being rendered. If implemented, the `getInitialProps` return value object will be provided to the route component as props.

```js
export default function Team({team}) {
  return (
    <Template>
      <h1>{team.name}</h1>
    </Template>
  );
}

Team.getInitialProps = async ({slug}) => {
  const team = await Teams.getBySlug(slug);
  return { team };
}
```

Lastly, there is a convenience component for linking to your routes. You may import `Link` and use it to push new paths. If the current URL pathname matches the `Link` destination, then it will apply a custom class name.

```js
import {Link} from "@ryancole/router";

export default function Navbar() {
  return (
    <nav className="nav nav-inline">
      <Link to="/" className="nav-link" activeClassName="font-weight-bold">
        Home
      </Link>
      <Link to="/team" className="nav-link" activeClassName="font-weight-bold">
        Teams
      </Link>
    </nav>
  );
}
```