Reframe + Crossroads = :heart:

@reframe/crossroads

Routing with Crossroads.js.

Usage

Add @reframe/crossroads to your reframe.config.js:

module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/crossroads')
    ]
};

Example

// /plugins/crossroads/example/reframe.config.js

module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/crossroads')
    ]
};

// /plugins/crossroads/example/pages/hello.config.js

import React from 'react';

const HelloPage = {
    route: '/hello/{name}',
    view: props => {
      const name = props.route.args.name;
      return <div>Hello {name}</div>;
    },
};

export default HelloPage;

// /plugins/crossroads/example/pages/landing.config.js

import React from 'react';

export default {
    route: '/',
    view: () => (
        <div>
            <a href="/hello/lisa">/hello/lisa</a>
            <br/>
            <a href="/hello/jon">/hello/jon</a>
        </div>
    ),
};