microcosm-react-router
React Router bindings for Microcosm
Last updated 5 years ago .
· Original npm · Tarball · package.json
$ cnpm install microcosm-react-router 
SYNC missed versions from official npm registry.

microcosm-react-router

Sync up react-router with Microcosm. This is experimental, and heavily inspired by react-router-redux

  1. Installation
  2. Setup
  3. Manipulating History
  4. Routing Middleware (add query string parsing)
  5. API

Installation

npm install --save microcosm-react-router
npm install --save history
npm install --save react-router

Setup

microcosm-react-router is implimented through Domains:

import createBrowserHistory from 'history/createBrowserHistory'
import Microcosm from 'microcosm'
import { Location } from 'microcosm-react-router'

class Repo extends Microcosm {
  setup({ history }) {
    this.addDomain('location', Location, { history })
  }
}

let history = createBrowserHistory()
let repo = new Repo({ history })

// Then pass history to React Router

Manipulating history

Control history by pushing actions:

import { push, replace, go, goBack, goForward } from 'microcosm-react-router'

repo.push(push, '/')

repo.push(goBack)

Checkout the history package for API documentation.

Routing Middleware

Add additional data processing to location data via middleware passed when adding the Location domain:

import Microcosm, { set } from 'microcosm'
import Location from 'microcosm-react-router'
import createBrowserHistory from 'history/createBrowserHistory'
import qs from 'querystring'

let repo = new Microcosm()
let history = createBrowserHistory()
let middleware = [
  location => set(location, 'query', qs.parse(location.search))
]

repo.addDomain('location', Location, { history, middleware })

API

Location Domain

Options

  • history: an instance of the history package
  • middleware: an array of functions to process raw location data (see middleware)

Middleware

Middleware allow extra processing of location data:

import { set } from 'microcosm'
import { parse } from 'query-string'

let middleware = [
  // Add parsed query data 
  location => set(location, 'query', parse(location.search))
]

Actions

These actions directly map to methods in the history package, which is the underlying kernel for react-router.

push(path, state)

Push a new entry in the history stack.

replace(path, state)

Replace the current entry in the history stack.

go(index)

Visit a specific index in the history stack.

goBack()

Return to the previous history stack entry.

goForward()

Go to the next history stack entry.

Current Tags

  • 0.0.1                                ...           latest (5 years ago)

1 Versions

  • 0.0.1                                ...           5 years ago
Maintainers (2)
Dependencies (0)
None
Dev Dependencies (10)

Copyright © npmmirror.com | 浙ICP备15033595号-63 |