Automatiske brødsmuler med React-Router

Slik får du automatiske brødsmuler med React-Router.

React-Router er en av flere routere for React. Det er et populært tillegg til React, med et snitt på cirka 800 nedlastinger om dagen (januar 2015).

Ved å bruke komponenten React-Breadcrumbs kan du få menystrukturen din gjengitt som brødsmulestier på websidene dine. Koden ligger på github.com/robbestad/react-breadcrumbs.

Hensikten med å vise stien din er som følger:

• Brukeren kan se hvor de er i strukturen
• Brukeren kan navigere seg raskt opp i strukturen
• Brukere som kommer inn på tilfeldige sider kan lettere finne frem til høyere nivåer.

Komponenten kan entes brukes via å laste inn JavaScript-filen inn etter React.js som i eksempelet under, eller via npm (npm install react-breadcrumbs).

Dernest må du angi et displayName for hver komponenten i appen din. Resten tar React-breadcrumbs seg av.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Demo React-Router med brødsmuler</title>
  </head>
  <body>
    <div id="app-root"></div>
    <script type="text/javascript" src="node_modules/react/dist/react.js"></script>
    <script type="text/javascript" src="node_modules/react-router/dist/react-router.js"></script>
    <script type="text/javascript" src="node_modules/react/dist/JSXTransformer.js"></script>
    <script type="text/jsx" src="node_modules/react-breadcrumbs/index.jsx"></script>
    <script type="text/jsx" src="app.jsx"></script>
  </body>
</html>

app.jsx

/** @jsx React.DOM */

var Router = ReactRouter;
var Link = ReactRouter.Link;
var DefaultRoute = ReactRouter.DefaultRoute;

var App = React.createClass({
    displayName: 'Demo',
    render: function () {
        return (<div>
            <Breadcrumbs />
            <RouteHandler />
        </div>);
    }
});

var Main = React.createClass({
    displayName: 'Forside',
    render: function () {
        return (
            <div>
                <hr/>
                <h5>Innhold</h5>
                <div>
                    <Link to='/skrivebord'>Skrivebord</Link>
                </div>
            </div>);
    }
});

var Skrivebord = React.createClass({
    displayName: 'Skrivebord',
    mixins: [ReactRouter.State],
    render: function () {
        var routes = this.getRoutes();
        if (this.constructor.displayName ===
            routes[routes.length - 1].handler.displayName) {
            return (
                <div>
                    <hr/>
                    <h5>Innhold</h5>
                    <h2>Skrivebord</h2>
                    <Link to='/skrivebord/oversikt'>Oversikt</Link>
                    <br/>
                    <Link to='/skrivebord/rapporter'>Rapporter</Link>
                </div>
            );
        } else {
            return (
                <div>
                    <hr/>
                    <h5>Innhold</h5>

                    <div>
                        <RouteHandler />
                    </div>
                </div>);
        }
    }
});

var Oversikt = React.createClass({
    displayName: 'Oversikt',
    render: function () {
        return (<div>
            <h2>Oversikt</h2>

            <div>
                <Link to='/skrivebord/rapporter'>Rapporter</Link>
            </div>
        </div>);
    }
});

var Rapporter = React.createClass({
    mixins: [ReactRouter.State],
    displayName: 'Rapporter',
    render: function () {
        var routes = this.getRoutes();
        if (this.constructor.displayName !==
            routes[routes.length - 1].handler.displayName) {
            return <ReactRouter.RouteHandler />
        } else {
            return (<div>
                <h2>Rapporter</h2>
                <div>
                    <Link to='/skrivebord/rapporter/salg'>Salg</Link>
                </div>
            </div>);
        }
    }
});

var Salg = React.createClass({
    displayName: 'Salg',
    render: function () {
        return (<div>
            <h2>Salg</h2>
            <RouteHandler />
        </div>);
    }
});

var routes = (
    <ReactRouter.Route name="/" handler={App}>
        <DefaultRoute name="/*" handler={Main} />
        <ReactRouter.Route name='skrivebord' handler={Skrivebord} >
            <ReactRouter.Route name='oversikt' handler={Oversikt} />
            <ReactRouter.Route name='rapporter' handler={Rapporter} >
                <ReactRouter.Route name='salg' handler={Salg} />
            </ReactRouter.Route>
        </ReactRouter.Route >
    </ReactRouter.Route>
);

ReactRouter.run(routes, function (Handler) {
    // Render the root app view-controller
    React.render(<Handler />, document.getElementById('app-root'));
});

Eksempel: http://react-breadcrumbs.herokuapp.com/

Repo: https://github.com/robbestad/react-breadcrumbs