使用 React Router 和 React.rb

我试图在 react.rb 内使用 React Router。我开始使用 reactor-router Gem，但 Gem 仅适用于 React Router <1 并且我使用 React Router 2.4.0 并且 API 完全不同。

在过去的几周里，我采取了一些方法来实现这项工作，但没有一种方法是正确的，每种方法都有自己的错误。

因为我没有选择，所以有人会指引我朝着正确的方向前进。

在设置方面，我使用 Webpack 来要求 React 和 React Router，因此 Webpack 注入的 application.js 如下所示：

React = require('react')
ReactDOM = require('react-dom')
_reactRouter = require('react-router')

方法 1 - 将路由器创建为本机 JS 并在渲染顶级组件时调用 ReactDOM.render 以呈现路由器

before_mount do

  @admin_members = React::API::create_native_react_class(Components::Company::AdminMember)
  @squad_index = React::API::create_native_react_class(Components::Squad::Index)
  @squad_show = React::API::create_native_react_class(Components::Squad::Show)
  @tribe_index = React::API::create_native_react_class(Components::Tribe::Index)
  @tribe_show = React::API::create_native_react_class(Components::Tribe::Show)

end

然后将路由器渲染到 after_mount 中的 div：

after_mount do
   `ReactDOM.render(React.createElement(
   _reactRouter.Router,
   { history: _reactRouter.browserHistory },
   React.createElement(_reactRouter.Route, { path: "admin/members", component: #{@admin_members} }),
   React.createElement(_reactRouter.Route, { path: "/squads", component: #{@squad_index} }),
   React.createElement(_reactRouter.Route, { path: "/squads/:squad_id", component: #{@squad_show} }),
   React.createElement(_reactRouter.Route, { path: "/tribes", component: #{@tribe_index} }),
   React.createElement(_reactRouter.Route, { path: "/tribes/:tribe_id", component: #{@tribe_show} })
      ), document.getElementById('bh_router_div')
   );`
end

这种方法虽然不算很好，但似乎可以创建路由器并按预期运行。 URL 或/tribe/22 将加载正确的 TribeShow 组件，并将正确的 ID 传递给组件。

我对这种方法的问题在于创建链接，因为链接组件不与路由器共享相同的上下文。我相信这是 ReactDOM.render 被 react-rb 调用一次，然后再次在上面的代码中调用。这将在页面上创建两个根组件(TopLevelRailsComponent)和(ReactRouter)。

因此创建了链接：

class MyRouter < React::NativeLibrary
  imports '_reactRouter'
end

然后在组件渲染方法中使用，如下所示：

MyRouter.Link({to: "/admin/members"}) { "and here is the link"}

链接已呈现，但单击它会发出以下警告，但不会导航到组件：

Uncaught TypeError: Cannot read property 'push' of undefined

查看链接组件的属性，我看到上下文为空，我相信这就是原因。似乎 Link 正在路由器的上下文之外被绘制。

方法 2 - 使用 react-rb API 渲染路由器，以便在页面上不调用 ReactDOM.render 两次

这似乎是一种更好的方法，但到目前为止，我还没有设法让它正常工作。

在我如何创建上面的链接的基础上，在组件的 render 方法中：

MyRouter.Router({history: `_reactRouter.browserHistory` },
        MyRouter.Route({ path: "/admin/members", component: @admin_members})
) {}

但我得到以下警告，页面不呈现：

Uncaught Invariant Violation: <Route> elements are for router configuration only and should not be rendered

方法 3 - 在本机 JS 中构建 Route 组件，以便它不会被渲染：

`var AppRoutes = React.createElement(_reactRouter.Route, { path: "/admin/members", component: #{@admin_members} });`

 MyRouter.Router({history: `_reactRouter.browserHistory` },
        `AppRoutes`
 ) {}

这超过了之前的错误，但路由器实际上没有路由，我得到以下警告(并且组件不呈现)：

Warning: [react-router] Location "/admin/members" did not match any routes

**历史：**作为旁注，在上面的两个例子中，我都试图设置历史：

MyRouter.Router({history: MyRouter.browserHistroy },
  `AppRoutes`
) {}

但是我收到关于提供折旧历史的警告，当我检查它的值为空时。使用_reactRouter.browserHistory会超过此警告。我不确定这是否与路由器未路由的事实相关。

我真的很感激任何帮助或指导这一点。即使是关于哪种方法是正确的，以及关于如何进行的任何提示的引导也确实非常受欢迎。