react.rb内からReact Routerを使用しようとしています。リアクトルルータGemを使用し始めましたが、Gemはリアクタルータ<でのみ動作し、リアクタルータ2.4.0を使用しており、APIはかなり異なっています。React RouterとReact.rbの使用
私はこの作業を行うにはいくつかのアプローチを取ってきましたが、いずれも正しいアプローチはありませんでした。それぞれ独自の欠陥があります。
私はすべての選択肢がないので、誰かが正しい方向に私を操縦してくれますか？セットアップの面では
ルータはそうWebPACKので注入されapplication.jsは、次のようになり、私が必要とするのWebPACKを使用しています反応し、リアクト：
React = require('react')
ReactDOM = require('react-dom')
_reactRouter = require('react-router')
アプローチ1 - ネイティブJSとしてルータを作成しますそして
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にルータをレンダリングする際に、ルータをレンダリングするためにReactDOM.renderを呼び出します。
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にあると信じています.rendは一度react-rbで呼び出され、その後もう一度上記のコードで呼び出されます。これにより、ページ（TopLevelRailsComponent）と（ReactRouter）に2つのルートコンポーネントが作成されます。
リンクは、このように作成されます。リンクは、レンダリング、それをクリックすると次の警告を与えるとしている
MyRouter.Link({to: "/admin/members"}) { "and here is the link"}
：部品に使用される、その後
class MyRouter < React::NativeLibrary
imports '_reactRouter'
end
そして、このような方法をレンダリングコンポーネントに移動しないでください：
Uncaught TypeError: Cannot read property 'push' of undefined
リンクコンポ私はその文脈がヌルであると思っており、これが理由だと私は信じています。それは、リンクがルータのコンテキスト外に引き出されているようです。
アプローチ2 - ReactDOM.renderがページに二回呼び出されていないように、これはより良いアプローチのようですが、これまでのところ、私は管理されていない
ルータをレンダリングするために反応し-RB APIを使用しますこれを正しく動作させるには
私はコンポーネントのレンダリング方法では、上記のリンクを作成する方法についてのビル：
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`
) {}
しかし、私は減価償却の歴史を提供についての警告を取得し、私は値をチェックするとき、それはnullです。 _reactRouter.browserHistoryを使用すると、この警告が表示されます。ルータがルーティングしていないという事実に関連しているかどうかはわかりません。
本当にありがとうと思います。どんなアプローチになっているのかについての正しい操縦者でさえ、どのように進むべきかについてのヒントは、本当に大歓迎です。