Neuron Powered Motorization

    react-routes

    0.2.6 • Public • Published

    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)

    Install

    npm i react-routes

    DownloadsWeekly Downloads

    236

    Version

    0.2.6

    License

    MIT

    Last publish

    Collaborators

    • tannerlinsley