react-context-router
v1.1.0
Published
Minimal React router based on React context
Downloads
8
Maintainers
Readme
react-context-router
Minimal React router based on React context
npm i react-context-router
React Router is an excellent routing solution, but sometimes it does a lot more than you need it to. This is intended to be a smaller option with a simpler API.
Features
- Small-ish package ~5KB
- Simple API
- One higher order component and two components: Router & Link
- Pass props directly to any component
- Pass anything through route context
Usage
// App.js
import React from 'react'
import { createRouter, Link } from 'react-context-router'
const NotFound = () => <div>Not Found</div>
const Nav = () => (
<nav>
<Link href='/' children='Home' />
<Link href='/posts/1' children='First Post' />
</nav>
)
class App extends React.Component {
render () {
const { route } = this.props
const Comp = route.component || NotFound
return (
<div>
<Nav />
<Comp />
</div>
)
}
}
export default createRouter(App)
// entry.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import Index from './Index'
import Post from './Post'
const routes = [
{
path: '/',
// Put any other route data here.
// This object will be provided through
// React context to the Router's children.
component: Index
},
{
path: '/posts/:id',
component: Post
}
]
const div = document.getElementById('app')
ReactDOM.render(<App routes={routes}>, div)
Server-side rendering
Pass a pathname
to the Router component to populate the context for a particular route.
const React = require('react')
const ReactDOM = require('react-dom')
const h = React.createElement
const App = require('./App')
const routes = [
{
path: '/',
name: 'Index'
},
{
path: '/posts/:id',
name: 'Post'
}
]
const html = ReactDOMServer.renderToString(
h(App, {
routes,
// Pass a value to the pathname prop for server side rendering
pathname: '/posts/32'
})
)
API
createRouter
Higher order component that provides history and route data through context.
routes
prop
Array of route objects. Each route must include a path
.
Any other value added to the object will be provided through context as the route
object when the location matches the path.
pathname
prop
Manually pass in a pathname to set the current path for server-side rendering.
Child Context
The wrapped component provides the following objects as context to its children:
history
wrappedwindow.history
object withlisten
andpush
methodsroute
object from the matching item in theroutes
prop. When a path contains parameters they will be passed asroute.params
.
<Router />
component
Component wrapped with createRouter
, provided as a convenience.
<Link />
component
Used in place of <a>
links to use client-side history navigation.
Size comparison
Gzip:
- react-context-router: 19.04 KB (5.13 KB without React)
- react-router: 40.29 KB with React
- Baseline react 14.52 KB
Results from bundle-size
MIT License