# provide-router

[![build status](https://img.shields.io/travis/loggur/provide-router/master.svg?style=flat-square)](https://travis-ci.org/loggur/provide-router) [![npm version](https://img.shields.io/npm/v/provide-router.svg?style=flat-square)](https://www.npmjs.com/package/provide-router)
[![npm downloads](https://img.shields.io/npm/dm/provide-router.svg?style=flat-square)](https://www.npmjs.com/package/provide-router)

Provides routing to React components.

> If you're using `react-router` v2 or v3, you'll want [v1 of this library](https://github.com/loggur/provide-router/tree/v1).


## Table of contents

1.  [Installation](#installation)
2.  [Usage](#usage)
3.  [Actions](#actions)
4.  [Reducers](#reducers)
5.  [Example](#example)


## Installation

```
npm install provide-router --save
```


## Usage

This is a provider factory (see [`react-redux-provide`](https://github.com/loggur/react-redux-provide)) that creates a router provider using your desired [`history`](https://github.com/mjackson/history) implementation.

```js
// client

import provideRouter from 'provide-router';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
const router = provideRouter(history);
```

```js
// server

import provideRouter from 'provide-router';
import { createMemoryHistory } from 'react-router';

const history = createMemoryHistory({ initialEntries: [ request.url ] });
const router = provideRouter(history);
```


## Actions

### pushRoute (Object location | String path)

Essentially `history.push(location)`.

### replaceRoute (Object location | String path)

Essentially `history.replace(location)`.

### goBack (Number n = 1)

Essentially `history.go(-1 * n)`;

### goForward (Number n = 1) {

Essentially `history.go(n)`;


## Reducers

### location

The current `location` via `history`.  `react-router`'s `Switch` and `Route` components rely on this.  Your own components can use this too, of course.

### history

The `history` object, synchronized with the provider's store.  This will be automatically passed to the `Router` component.  You probably won't ever use this but it's there if you need it.


## Example

```js
// src/components/App.js

import React from 'react';
import { Router, Switch, Route } from 'react-router';
import { Awesome, Home, Foo, Bar } from './index';

// `history` is automatically provided to `Router`
// and `location` is automatically provided to `Switch` and `Route`
const App = () => (
  <Router>
    <Awesome>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/foo" component={Foo} />
        <Route path="/bar" component={Bar} />
      </Switch>
    </Awesome>
  </Router>
);

export default App;
```

```js
// src/renderApp.js (usually client-side)

import 'react-redux-provide/lib/install';
import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
import defaultProps from './defaultProps';
import provideRouter from 'provide-router';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

defaultProps.providers.router = provideRouter(history);

function renderApp(props, element = document.getElementById('root')) {
  return render(<App { ...props }>, element);
}

renderApp(defaultProps);

export default renderApp;
```

```js
// src/renderAppToString.js (usually server-side)

import 'react-redux-provide/lib/install';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './components/App';
import defaultProps from './defaultProps';
import provideRouter from 'provide-router';
import createMemoryHistory from 'history/createMemoryHistory';

// You should actually set this per request within the props passed to
// the `renderAppToString` function, but just for the sake of the example...
const history = createMemoryHistory({ initialEntries: [ request.url ] });

defaultProps.providers.router = provideRouter(history);

function renderAppToString(props = defaultProps) {
  return renderToString(<App { ...props } />);
}

export default renderAppToString;
```