Question

我正在尝试使用react.rb中的React Router。我开始使用reactor-router Gem，但是Gem只适用于React Router＆lt; 1，我使用的是React Router 2.4.0，API非常不同。

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

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

在设置方面，我使用Webpack来要求React和React路由器，因此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会超出此警告。我不确定这是否与路由器未路由的事实相关。

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

Answer 1

这已在reactrb-router https://github.com/reactrb/reactrb-router/tree/v2-4-0

的V2.4.0分支中解决

另请注意新的DSL

使用React Router和React.rb

1 个答案: