Reactjs 使用没有JSX的react路由器

我试图找到一个通过javascript API使用react路由器的示例，但到目前为止还没有找到任何东西

我的目标是将react路由器与试剂和clojurescript一起使用。因此，如果有人能做到这一点（即使是使用Om），我希望能朝着正确的方向努力。否则，只需一个没有JSX的简单javascript示例就可以了

编辑1--接近解决方案 感谢@FakeRainBrigand将JSX翻译成普通JS的帮助

下面是React.js 0.11.2版本（当前版本的试剂使用0.4.3）

提示：对于您的React版本，您可以使用

jsxtTransformer.JS

执行JSX->JS转换。只需将其包含在页面中，并使用浏览器的开发人员控制台执行

JSXTransformer.transform（'/**@jsx React.DOM*/…'）。code

以下是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)}))))

---

不幸的是，试剂默认创建的成分似乎不是“标准”反应成分，因为

React.isValidClass（myReagentComponent）===false

。所以剩下的就是找出如何以通过测试的形式生成组件。我为此贴了一个帖子。

在0.12的JavaScript中，它看起来像这样：

var路由器=require（'react-Router'）；
var Route=React.createFactory（Router.Route）；
var DefaultRoute=React.createFactory（Router.DefaultRoute）；
var NotFoundRoute=React.createFactory（Router.NotFoundRoute）；
反应((
React.createElement（路由器，{location:“history”}，
路由（{路径：“/”，处理程序：App}，
DefaultRoute（{handler:Home}），
路由（{name:“about”，handler:about}），
路由（{name:“users”，handler:users}，
路由（{name:“最近的用户”，path:“最近的”，handler:RecentUsers}），
路由（{name:“user”，path:“/user/：userId”，handler:user}），
NotFoundRoute（{handler:UserRouteNotFound}）
)
), 
NotFoundRoute（{处理程序：NotFound}）
)
)，文件正文）；

我刚刚完成了一个实验库的构建

其主要思想是使用自0.5.0-alpha3版以来试剂提供的新API与React进行互操作

试剂/reactify组件

让我们在React代码中使用试剂组件（这是路由器需要的）

而

试剂/adapt react class

则启用相反的功能

我试图做的是包装像

Link

和

RouterHandler

这样的组件，并直接在试剂中使用它们

i、 e:

相反，您可以将试剂的成分作为

处理程序

传递给

ReactRouter.Router

对象

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

实现非常简单（与您更新的问题类似）： 请参阅自述文件进行更深入的讨论

---

到目前为止，它还在工作，但肯定需要更多的输入/帮助。

一个不使用JX和不使用

createElement的示例（对于路由来说，这对我来说没有意义）：

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

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

// 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];