8

我正在尝试通过 javascript API 找到使用 react-router 的示例，但到目前为止找不到任何东西。

我的目标是将 react-router 与试剂和 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提示：您可以使用您的 React 版本执行 JSX->JS 转换。只需将其包含在您的页面中并使用浏览器的开发者控制台执行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 问题。

4

3 回答 3

10

在 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);
于 2014-11-05T20:54:31.970 回答
5

一个没有 JX 且没有使用的示例createElement（在路由的情况下这对我来说没有意义）：

// 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];
于 2015-04-11T15:52:43.463 回答
2

我刚刚完成了一个实验存储库，用于执行此 操作 https://github.com/ghedamat/reagent-react-router

主要思想是使用 Reagent 自 0.5.0-alpha3 版本以来提供的新 API 与 React 互操作

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

并reagent/adapt-react-class启用反之亦然。

我正在尝试做的是将组件包装起来Link，RouterHandler然后直接在试剂中使用它们。

IE：

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

相反，您可以将 Reagent 的组件传递handlers给ReactRouter.Router对象。

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

实现非常简单（并且类似于您更新的问题）：https ://github.com/ghedamat/reagent-react-router/blob/master/src/cljs/reagent_react_router/react_router.cljs 查看自述文件以获得更多信息深入讨论。

到目前为止它正在工作，但肯定可以使用更多的输入/帮助。

于 2015-02-18T17:02:51.447 回答