A Middleware for Simplr Router to enable React support.

Usage no npm install needed!

<script type="module">
  import simplrWcRouterReactMiddleware from 'https://cdn.skypack.dev/@simplr-wc/router-react-middleware';


Title Image

Simplr-Router React Middleware


This repository contains the React middleware needed for running Simplr Router with React.


The example is created on top of create-react-app.

import App from "./App";
import Hello from "./Hello";
import SimplrRouter from "@simplr-wc/router";
import SimplrRouterReactMiddleware from "@simplr-wc/router-react-middleware";

const routes = [
    path: "/",
    component: App,
    path: "/hello",
    component: Hello,
    routes: [
        path: ":name",
        component: Hello,

const router = new SimplrRouter({ routes });

The properties from dynamic routes are accessible from the props of the component.

import logo from "./logo.svg";
import "./App.css";
import { changeView } from "@simplr-wc/router";

function Hello(props) {
  function handleSubmit() {
    const name = document.querySelector("input[type='text']").value;

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello {props.name || "World"}!</p>
        <input type="text" placeholder="Enter a name here and press submit" />
        <input type="button" value="Submit" onClick={handleSubmit} />

export default Hello;