react-router-crosslink

React Router Link with parametrised history

The same as React Router DOM <Link> except it supports optionally reading history as a prop.

import CrossLink from 'react-router-crosslink'
import createHistory from 'history/createBrowserHistory'

// In practice, you'll probably be creating this elsewhere
const history = createHistory()

<Link
  to='/'
  history={history}
/>

Intended use case

Multiple "sub-apps", which are integrated together via a parent app. Sub apps should be able to run standalone and set up their own routing. The parent app "mounts" each sub-app under a child route (via basename). Given basenames are prefixed to all URLs, the sub-app can't "break out" of its child route using traditional <Link>.

By passing the parent app's history to <CrossLink>, sub-apps can cross-link between themselves. See this CodeSandbox.

Author

© 2018 Tom Vincent [email protected] (https://tlvince.com)

License

Released under the MIT license.