flux-router-component

flux-router-component

This package provides navigational React components and router React mixin for applications built with Flux architecture. Please check out examples of how to use these components.

NavLink

NavLink is the a React component for navigational links. When the link is clicked, NavLink will dispatch NAVIGATE action to flux dispatcher. The dispatcher can then dispatch the action to the stores that can handle it.

Example Usage

var NavLink = require('flux-router-component').NavLink;

var Nav = React.createClass({
    render: function () {
        var pages,
            links,
            dispatcher = this.props.dispatcher;  // this is the Flux dispatcher object
        pages = [
            {
                name: 'home',
                url: '/home',
                text: 'Home'
            },
            {
                name: 'about',
                url: '/about',
                text: 'About Us'
            }
        ];
        links = pages.map(function (page) {
            return (
                <li className="navItem">
                    <NavLink href={page.url} dispatcher={dispatcher}>
                        {page.text}
                    </NavLink>
                </li>
            );
        });
        return (
            <ul className="nav">
                {links}
            </ul>
        );

    }
});

RouterMixin

RouterMixin is a React mixin to be used by appication's top level React component to:

• manage browser history when route changes, and
• dispatch NAVIGATE action via flux dispatcher on window popstate events

Example Usage

var RouterMixin = require('flux-router-component').RouterMixin;

var Application = React.createClass({
    mixins: [RouterMixin],
    ...
});

License

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.

Third-pary open source code used are listed in our package.json file.