ich Router zu verwenden versuchen Reagieren aus react.rb. Ich begann mit dem Reaktor-Router Gem, aber das Gem funktioniert nur mit React Router < 1 und ich benutze React Router 2.4.0 und die API ist ganz anders.Router und React.rb Reagieren Mit
In den letzten Wochen habe ich ein paar Ansätze zu bekommen diese Arbeit gemacht, aber keiner der Ansätze richtig gewesen, die jeweils ihre eigene Schuld ist.
Bitte wird jemand lenkt mich in der richtigen Richtung, wie ich alle aus Optionen bin.
In Bezug auf die Einrichtung, ich Webpack bin mit dem application.js erfordern Reagieren und Reagieren Router so, die durch Webpack injiziert wird wie folgt aussieht:
React = require('react')
ReactDOM = require('react-dom')
_reactRouter = require('react-router')
Ansatz 1 - erstellen Sie den Router als native JS und rufen ReactDOM.render den Router zu machen, wenn eine Top-Level-Rendering-Komponente
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
und dann rendern den Router zu einem div in after_mount:
Dieser Ansatz, wenn auch nicht recht, scheint in zu arbeiten, dass der Router erstellt wird und wie erwartet funktioniert. Eine URL oder/tribe/22 lädt die korrekte TribeShow-Komponente und übergibt die korrekte ID an die Komponente.
Das Problem, das ich mit diesem Ansatz haben, wenn es darum geht, ein Link als Link-Komponente nicht auf die Schaffung der gleichen Kontext wie der Router teilen. Ich glaube, das liegt daran, dass ReactDOM.render einmal von react-rb aufgerufen wird und dann noch einmal im obigen Code. Dies erstellt zwei Root-Komponenten auf der Seite (TopLevelRailsComponent) und (ReactRouter).
Die Verbindung wird so erstellt:
class MyRouter < React::NativeLibrary
imports '_reactRouter'
end
und dann in einem Komponenten machen Methode wie folgt verwendet:
MyRouter.Link({to: "/admin/members"}) { "and here is the link"}
Der Link gerendert wird, sondern darauf klicken gibt die folgende Warnung und tut Navigieren Sie nicht zur Komponente:
Uncaught TypeError: Cannot read property 'push' of undefined
Blick auf die Eigenschaften des Link Compo Ich sehe, dass der Kontext null ist und ich glaube, das ist der Grund. Es scheint, dass der Link außerhalb des Kontexts des Routers gezogen wird.
Ansatz 2 - nutzen Sie die reagieren-rb API, um den Router zu machen, so dass ReactDOM.render nicht zweimal auf der Seite aufgerufen wird
Dies scheint ein besserer Ansatz zu sein, aber bisher habe ich es nicht geschafft um das richtig funktionieren zu lassen.
Gebäude auf, wie ich auf den Link oben zu erstellen, in der Render-Methode einer Komponente:
MyRouter.Router({history: `_reactRouter.browserHistory` },
MyRouter.Route({ path: "/admin/members", component: @admin_members})
) {}
Aber ich bekomme die folgende Warnung und die Seite macht nicht:
Uncaught Invariant Violation: <Route> elements are for router configuration only and should not be rendered
Ansatz 3 - Erstellen Sie die Route-Komponente in nativem JS, so dass sie nicht gerendert wird:
`var AppRoutes = React.createElement(_reactRouter.Route, { path: "/admin/members", component: #{@admin_members} });`
MyRouter.Router({history: `_reactRouter.browserHistory` },
`AppRoutes`
) {}
Diese vorherigen Fehler wird Vergangenheit, aber der Router nicht wirklich Strecke und ich warnen die folgenden (und die Komponente machen nicht):
Warning: [react-router] Location "/admin/members" did not match any routes
Geschichte: Als Randnotiz, sowohl in der Beispiele oben habe ich versucht, die Geschichte als solche zu setzen:
MyRouter.Router({history: MyRouter.browserHistroy },
`AppRoutes`
) {}
Aber ich erhalte eine Warnung über eine abgeschriebene Geschichte bereitstellt und wenn ich den Wert überprüfen, ist es null. Die Verwendung von _reactRouter.browserHistory geht über diese Warnung hinaus. Ich bin mir nicht sicher, ob dies für diese Tatsache relevant ist, dass der Router nicht routet oder nicht.
Ich würde wirklich jede Hilfe schätzen oder steuern auf diese. Selbst eine Lenkung, welcher der Ansätze richtig ist, und Hinweise darauf, wie es weitergehen soll, wären in der Tat sehr willkommen.