Bare router for React components, using props as query string

Usage no npm install needed!

<script type="module">
  import reactQuerystringRouter from '';



Bare router for React components, using query string as props.

By making use of the getComponentClass and getComponentProps callbacks, this route will render the following element:



import { Router } from 'react-querystring-router';

const myRouter = new Router({
  // This is how the router maps component names to corresponding classes
  getComponentClass: ({ component }) => require(`components/${component}.jsx`),
  // This is to combine url params with default and additional props
  getComponentProps: (params) => {
    return {
      unlessOverridden: true,
      alwaysHere: true,
  // Tell React where to render in the DOM
  container: document.getElementById('content'),
  // Called whenever the route changes (also initially), receiving the parsed
  // props as the first argument
  onChange: (params) => {
    // E.g. Use the params to set a custom document.title

The router always sends a reference to itself to the rendered component through the router prop.

Changing the route

import { uri } from 'react-querystring-router';
const { stringifyParams } = uri;


render() {
  return (
    <div className="serious-component">
      <a href={stringifyParams({ lifeChangingProp: 1 })}
         Click me por favor