react-routes
v0.2.6 router routes route routing react-component react-router react history pushstate and 9 more...
react-routes
Lightweight isomorphic HTML5 router for ReactJS.
Setup
Client:
//- index.js
import React from 'react';
import ReactDom from 'react-dom';
import {Router} from 'react-routes';
import About from './components/About';
import Root from './components/Root';
import Stats from './components/Stats';
let routes = [
{path: '/about', handler: About, props: {}},
{path: '/stats', handler: Stats},
{path: '/', handler: Root},
];
ReactDom.render(<Router routes={routes} transitionName='router'/>, document.getElementById('app'));
//- index.styl
*
position: relative
.router-enter
opacity: 0.01
.router-enter.router-enter-active
opacity: 1
transition: opacity 1.5s ease-in
.router-leave
opacity: 1
.router-leave.router-leave-active
opacity: 0.01
transition: opacity 1.5s ease-in
Server:
//- index.js
import React from 'react';
import ReactDomServer from 'react-dom/server';
import {Router} from 'react-routes';
import routes from '../../app/routes';
export default {render};
function render(req, res, next) {
let html = ReactDomServer.renderToString(<Router routes={routes} url={req.url} transitionName='router'/>);
res.render('index', {html});
}
//- index.jade
doctype html
html(lang="en")
head
title React App
link(href="#{assetPath('bundle.css')}" media="all" rel="stylesheet" type="text/css")
body
#app!= html
script(src="#{assetPath('bundle.js')}" type="text/javascript" async)