使用 React Router 和 React.rb

Question

我正尝试在 react.rb 中使用 React Router。我开始使用 reactor-router Gem，但 Gem 仅适用于 React Router < 1，而我使用的是 React Router 2.4.0，而 API 则完全不同。

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

请有人引导我朝着正确的方向前进，因为我别无选择。

在设置方面，我正在使用 Webpack 来要求 React 和 React Router，所以 Webpack 注入的 application.js 看起来像这样：

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

方法 1 - 创建 Router 作为原生 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 时，因为 Link 组件与路由器不共享相同的上下文。我相信这是因为 ReactDOM.render 被 react-rb 调用一次，然后在上面的代码中再次调用。这会在页面上创建两个根组件 (TopLevelRailsComponent) 和 (ReactRouter)。

Link 是这样创建的：

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

然后像这样在组件渲染方法中使用：

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

已呈现 link，但单击它会出现以下警告并且不会导航到组件：

Uncaught TypeError: Cannot read property 'push' of undefined

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

方法 2 - 使用 react-rb API 渲染路由器，这样 ReactDOM.render 就不会在页面上被调用两次

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

基于我上面创建 Link 的方式，在组件的渲染方法中：

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

history: 作为旁注，在上面的两个例子中，我都尝试这样设置 history:

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

但我收到有关提供折旧历史记录的警告，当我检查该值时它为空。使用 _reactRouter.browserHistory 可以克服此警告。我不确定这是否与路由器未路由这一事实有关。

我真的很感激任何帮助或指导。甚至指导哪种方法是正确的，以及关于如何进行的任何提示都非常受欢迎。

Answer 1

这已在 reactrb-router 的 V2.4.0 分支中得到解决 https://github.com/reactrb/reactrb-router/tree/v2-4-0

另请注意新的 DSL

使用 React Router 和 React.rb

Using React Router and React.rb

react-router

react.rb