Using a reactive router without JSX

Question

I am trying to find an example of using a reactive router through the javascript API, but still could not find anything.

My goal is to use a reactive router with reagent and clojurescript. Therefore, if someone got this job (even with Ohm), I would be grateful for pushing in the right direction. Otherwise, only a simple javascript example without JSX will be useful.

Edit 1 - Get closer to the solution

Thanks to @FakeRainBrigand for helping me translate JSX into plain JS.

Here is React.js version 0.11.2 (this is what the current Reagent version uses - 0.4.3).

/** @jsx React.DOM */ Routes({location: "history"}, Route({name: "app", path: "/", handler: App}, Route({name: "inbox", handler: Inbox}), Route({name: "calendar", handler: "{Calendar}"}))) 

Tip. You can perform the JSX-> JS conversion using JSXTransformer.js for your version of React. Just add it to your page and use the browser developer console to execute JSXTransformer.transform('/** @jsx React.DOM */<Route location="history">...</Route>').code

Here is the version of Clojurescript:

 (ns mytest.core (:require [reagent.core :as reagent :refer [atom]]) (defn home [] [:div [:h1 "Home Component Placeholder"]]) (defn info [] [:div [:h1 "Info Component Placeholder"]]) (defn build-component [comp] (reagent/as-component (if (fn? comp) (comp) comp))) (defn react-router [] (js/ReactRouter.Routes #js {:location "history"} (js/ReactRouter.Route #js {:name "app" :path "/" :handler (build-component home)} (js/ReactRouter.DefaultRoute #js {:handler (build-component home)}) (js/ReactRouter.Route #js {:name "about" :path "/about" :handler (build-component info)})))) 

Unfortunately, the default Reagent components do not appear to be “standard” React components, in this React.isValidClass(myReagentComponent) === false . So all that remains is to figure out how to generate the components in the form that passes this test. I have a stack overflow question posted for this.

Answer 1

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); 

Answer 2

An example without JX and without using createElement (which does not make sense to me in the 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]; 

Answer 3

I just finished creating an experimental repository for this https://github.com/ghedamat/reagent-react-router

The main idea is to use the new apis, which provides Reagent from version 0.5.0-alpha3 to interact with React

reagent/reactify-component allow reagent reagent/reactify-component to be used in the reactor (this is what the router requires)

and reagent/adapt-react-class allow the opposite.

What I'm trying to do is wrap components like Link and RouterHandler and use them directly in the reagent.

i.e:

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

Conversely, you can pass Reagent 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 pretty simple (and looks like your updated question): https://github.com/ghedamat/reagent-react-router/blob/master/src/cljs/reagent_react_router/react_router.cljs Have a look at README for a more detailed discussion.

It still works, but it can definitely use more input / help.