react-no-reload-router v0.0.4

react-no-reload-router

React JS component displaying components depending on the current pathname without reloading page and catching link events

Install with npm

npm i --save react-no-reload-router

Example use

import React, { Component } from "react";
import { Route, Router } from "react-no-reload-router";

class Home extends Component {
  render() {
    return (
      <div>
        <p>Home {JSON.stringify(this.props)}</p>
        <a href="/">Home</a> - <a href="/other">other</a>
      </div>
    );
  }
}

class Other extends Component {
  render() {
    return (
      <div>
        <p>Other {JSON.stringify(this.props)}</p>
        <a href="/">Home</a> - <a href="/other">other</a>
      </div>
    );
  }
}

class Error404 extends Component {
  render() {
    return (
      <div>
        <h1>404 - Not Found</h1>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
          <div>My awesome SPA</div>
          <Router props={{ example: "this props will be added to all route components" }} errorHandler={Error404}>
            <Route path="/" handler={Home} props={{ title: "ok" }} title="Home page" />
            <Route path="/other" handler={Other} title="Other page" />
          </Router>
      </div>
    );
  }
}

export default App;