How to use fluxible-router - 10 common examples

var provideContext = require('fluxible/addons/provideContext');
var handleHistory = require('fluxible-router').handleHistory;

var ChatApp = React.createClass({
    render: function() {
        return React.cloneElement(
            <div>
                
                
            </div>
        );
    }
});

// wrap with history handler
ChatApp = handleHistory(ChatApp);

// and wrap that with context
ChatApp = provideContext(ChatApp);

module.exports = ChatApp;

import Fluxible from 'fluxible';
import { RouteStore } from 'fluxible-router';
import Application from './components/Application';
import routes from './configs/routes';
import ApplicationStore from './stores/ApplicationStore';

// create new fluxible instance
const app = new Fluxible({
    component: Application
});

app.plug(require('../../src/strickland-plugin'));

// register routes
var MyRouteStore = RouteStore.withStaticRoutes(routes);
app.registerStore(MyRouteStore);

// register other stores
app.registerStore(ApplicationStore);

module.exports = app;

var provideContext = require('fluxible-addons-react/provideContext');
var handleHistory = require('fluxible-router').handleHistory;

var ChatApp = React.createClass({
    render: function() {
        return (
            <div>
                
                
            </div>
        );
    }
});

// wrap with history handler
ChatApp = handleHistory(ChatApp);

// and wrap that with context
ChatApp = provideContext(ChatApp);

module.exports = ChatApp;

server.use(function (req, res, next) {
    var context = app.createContext({
        req: req, // The fetchr plugin depends on this
        xhrContext: {
            _csrf: req.csrfToken() // Make sure all XHR requests have the CSRF token
        }
    });

    debug('Executing showChat action');
    if ('0' === req.query.load) {
        renderPage(req, res, context);
    } else {
        context.executeAction(navigateAction, { url: req.url, type: 'pageload' }, function (err) {
            if (err) {
                if (err.statusCode && err.statusCode === 404) {
                    next();
                } else {
                    next(err);
                }
                return;
            }
            renderPage(req, res, context);
        });
    }
});

import Root from "./containers/Root";

import FeaturedStore from "./stores/FeaturedStore";
import HtmlHeadStore from "./stores/HtmlHeadStore";
import IntlStore from "./stores/IntlStore";
import PhotoStore from "./stores/PhotoStore";

// Create the fluxible app using Root as root component
const app = new Fluxible({ component: Root });

// Make fetchr services respond to /api endpoint
app.plug(fetchrPlugin({ xhrPath: "/api" }));

// Register a fluxible RouteStore
const AppRouteStore = RouteStore.withStaticRoutes(routes);
app.registerStore(AppRouteStore);

// Register app-specific stores
app.registerStore(FeaturedStore);
app.registerStore(HtmlHeadStore);
app.registerStore(IntlStore);
app.registerStore(PhotoStore);

export default app;

render() {
        //console.log('LTILogin.render called.resource_id='+this.state.resource_id);
        return (
            <div>
                Welcome to LTI Login.
            </div>
        );
    }
}


LTI.contextTypes = {
    executeAction: PropTypes.func.isRequired
};
LTI = handleRoute(LTI);
export default LTI;

context.service.delete('projects', payload, {}, function(error, response) {
		if (error) {
			context.dispatch('DELETE_PROJECT_FAILURE', payload);
			done();
			return;
		}

		context.dispatch('DELETE_PROJECT_SUCCESS', response.repository);

		if ('undefined' !== typeof window && 'undefined' !== typeof io) {
			var socket = io();
			socket.emit('leave', { repository: payload.project.repository } );
		}

		navigateAction(context, {
	        url: '/projects'
	    }, done);
	});
};

componentDidUpdate(prevProps, prevState) {
        const newProps = this.props;
        if (newProps.pageTitle === prevProps.pageTitle) {
            return;
        }
        document.title = newProps.pageTitle;
    }
}

Application.propTypes = {
    currentRoute: PropTypes.object,
    pageTitle: PropTypes.string
};

export default provideContext(handleHistory(connectToStores(
    Application,
    [ApplicationStore],
    function (context, props) {
        var appStore = context.getStore(ApplicationStore);
        return {
            pageTitle: appStore.getPageTitle()
        };
    }
)));

}
}

Application.contextTypes = {
    getStore: PropTypes.func,
    executeAction: PropTypes.func,
    getUser: PropTypes.func
};

Application = connectToStores(Application, [ApplicationStore], function (context, props) {
    return {
        ApplicationStore: context.getStore(ApplicationStore).getState()
    };
});

Application = handleHistory(Application, {enableScroll: false});

Application = provideContext(Application, { //jshint ignore:line
    getUser: PropTypes.func
});

export default Application;

iconElementRight={addIconButton}
            onLeftIconButtonTouchTap={::this.onNavaTouchTap} />
          
          
        
      );
    }
}

App = connectToStores(App, [MetaStore], function(stores, props) {
  return {
    MetaStore: stores.MetaStore.getState()
  };
});

App = handleHistory(App);

App = provideContext(App);

export default App;