react-rainie-router

react-rainie-router

by manoj

HTML

<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-rainie-router.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<div id="react-container">

</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.home,
.account {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h2 {
  color: #fff;
}

.home {
  background: #00BCD4;
}

.account {
  background: #68cf52;
}

Babel + JSX

const Router = reactRainieRouter;
const { Link, listenBefore, Route } = Router;


function Home({url, title}) {
    return (
        <section className="home">
            <h2>Welcome to my {title}</h2>
            <p>current link: {url}</p>
            <Link href="/account/123">go account</Link>
        </section>
    );
}

function Account({url, matches, name}) {
    return (
        <section className="account">
            <h2>Account: {matches.id}</h2>
            <p>my name is : {name}</p>
            <pre>current link: {url}</pre>
            <Link href="/">go homepage</Link>
        </section>
    );
}

const App = () => (
	<div className="app">
		<Router>
            <Home path="/" title="homepage" />
            <Account path="/account/:id?" name="rainie" default />
		</Router>
	</div>
);

ReactDOM.render(<App />, document.getElementById('react-container'));