使用React.rb路由器和React.rb

Question

我正在尝试从react.rb内部使用react.rb路由器。我开始使用反应堆路由器Gem，但是Gem只适用于reactor路由器<1，而我使用的是Reactive2.4.0，API非常不同。

在过去的几个星期里，我采取了几种方法来实现这一目标，但没有一种方法是正确的，每一种方法都有各自的错误。

请有人引导我向正确的方向，因为我是所有的选择。

在设置方面，我使用Webpack来要求反应和反应路由器，因此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传递给组件。

这种方法的问题是，当涉及到创建链接时，因为Link组件与路由器没有共享相同的上下文。我相信这是因为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组件的属性，我看到上下文为null，我相信这就是原因。看来链接是在路由器的上下文之外绘制的。

方法2-使用react react来呈现路由器，这样ReactDOM.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中构建路由组件，这样它就不会被呈现：

`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可以通过这个警告。我不确定这是否与路由器没有路由的事实有关。

我真的很感谢你在这方面的任何帮助或引导。即使是关于哪一种方法是正确的，以及任何关于如何进行的暗示，都是非常受欢迎的。

Answer 1

这一问题已经在reactrb路由器https://github.com/reactrb/reactrb-router/tree/v2-4-0的V2.4.0分支中得到了解决。

此外，请注意新的DSL