reactjs - 在没有 JSX 的情况下使用 React-router

Question

我正在尝试找到通过 javascript API 使用 React-router 的示例，但到目前为止尚未找到任何内容。

我的目标是将react-router与reagent和clojurescript一起使用。因此，如果有人已经实现了这一点(即使是 Om)，我将不胜感激地插入正确的方向。否则，一个没有 JSX 的直接 JavaScript 示例会很有帮助。

编辑 1 - 更接近解决方案

感谢 @FakeRainBrigand 帮助将 JSX 转换为普通 JS。

这是 React.js 0.11.2 版本(当前版本的 Reagent 使用的版本是 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}"})))

提示:您可以使用 JSXTransformer.js 执行 JSX->JS 转换。适用于您的 React 版本。只需将其包含在您的页面中并使用浏览器的开发者控制台执行 JSXTransformer.transform('/** @jsx React.DOM */<Route location="history">...</Route>').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)}))))

不幸的是，Reagent 默认创建的组件似乎不是“标准”React 组件，因为React.isValidClass(myReagentComponent) === false 。因此，剩下的就是弄清楚如何生成通过该测试的形式的组件。我有一个Stack Overflow question为此发布。

Answer 1

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

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