score:10

Accepted answer

in 0.12 in javascript it looks like this:

var router = require('react-router');
var route = react.createfactory(router.route);
var defaultroute = react.createfactory(router.defaultroute);
var notfoundroute = react.createfactory(router.notfoundroute);

react.render((
  react.createelement(router, {location: "history"}, 
    route({path: "/", handler: app}, 
      defaultroute({handler: home}), 
      route({name: "about", handler: about}), 
      route({name: "users", handler: users}, 
        route({name: "recent-users", path: "recent", handler: recentusers}), 
        route({name: "user", path: "/user/:userid", handler: user}), 
        notfoundroute({handler: userroutenotfound})
      )
    ), 
    notfoundroute({handler: notfound})
  )
), document.body);

score:2

i've just finished putting together an experiment repository for doing this https://github.com/ghedamat/reagent-react-router

the main idea is using the new apis that reagent provides since version 0.5.0-alpha3 for interop with react

reagent/reactify-component let's you use reagent components in react code (which is what the router requires)

and reagent/adapt-react-class enables the vice-versa.

what i'm attempting to do is wrap components like link and routerhandler and use them directly in reagent.

i.e:

[:ul.nav.navbar-nav
  [:li
    [link {:to "app"} "home"]]
  [:li
    [link {:to "about"} "about page"]]]

conversely you can pass reagent's components as handlers to the reactrouter.router object.

(def routes
  (route {:name "app" :path "/" :handler app-page}
    (route {:name "about" :path "about" :handler about-page}))
  (defaultroute {:handler default-page-meta})))

the implementation is quite simple (and similar to your updated question): https://github.com/ghedamat/reagent-react-router/blob/master/src/cljs/reagent_react_router/react_router.cljs look at the readme for a more in-depth discussion.

it's working so far but could definitely use more inputs/help.

score:5

an example without jx and without using createelement (which doesn't make sense to me in case of routes):

// this snippet was tested with react 0.13.1 
// and react-router 0.13.2
import router from 'react-router';
import app    from './components/app';
import inbox  from './components/inbox';

const approute = router.createroute({
  path: '/',
  name: 'app',
  handler: app
});

const inboxroute = router.createroute({
  name: 'inbox',
  handler: inbox,
  parentroute: approute
});

// important: you have to export the root route wrapped in array 
export default [approute];

Related Query

More Query from same tag