provide-router

Provides routing to React components.

If you're using react-router v2 or v3, you'll want v1 of this library.

Table of contents

1. Installation
2. Usage
3. Actions
4. Reducers
5. Example

Installation

npm install provide-router --save

Usage

This is a provider factory (see react-redux-provide) that creates a router provider using your desired history implementation.

// client

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

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

// 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

// 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;

// 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;

// 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;