Simplr-Router React Middleware
Introduction
This repository contains the React middleware needed for running Simplr Router with React.
Usage
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 });
router.use(SimplrRouterReactMiddleware());
router.init();
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;
changeView(`/hello/${name}`);
}
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} />
</header>
</div>
);
}
export default Hello;