使用 React 路由器和 React.rb

Question

我正在尝试在 react.rb 中使用 React Router。我开始使用 reactor-router Gem，但 Gem 仅适用于 React Router

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

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

在设置方面，我使用 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

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

方法 2 - 使用 react-rb API 渲染路由器，这样 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 中构建 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可以通过此警告。我不确定这是否与路由器没有路由的事实有关。

我非常感谢任何帮助或指导。即使是指导哪种方法是正确的，以及有关如何进行的任何提示，也确实非常受欢迎。

Answer 1

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

另外请注意新的 DSL