我正在尝试从 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
查看链接组件的属性，我发现上下文为空，我相信这就是原因。似乎链接是在路由器的上下文之外绘制的。
方法 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超越了这个警告。我不确定这是否与路由器未路由的事实有关。
我真的很感激任何帮助或指导。即使是指导哪种方法是正确的，以及关于如何进行的任何提示，也确实非常受欢迎。