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 const NotFound = <div>Not Found</div> const Nav = <nav> <Link href='/' children='Home' /> <Link href='/posts/1' children='First Post' /> </nav> Component { const route = thisprops const Comp = routecomponent || NotFound return <div> <Nav /> <Comp /> </div> } App
// entry.js 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 ReactDOM
Server-side rendering
Pass a pathname
to the Router component to populate the context for a particular route.
const React = const ReactDOM = const h = ReactcreateElementconst App = const routes = path: '/' name: 'Index' path: '/posts/:id' name: 'Post' const html = ReactDOMServer
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