React-router - props an Handler-Komponente übergeben

Question

Ich habe die folgende Struktur für meine React.js-Anwendung mit React Router:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (

            Ein Header

    );
  }
});

var routes = (

);

ReactRouter.run(routes, function (Handler) {
  React.render(, document.body);
});

Ich möchte einige Eigenschaften an das Comments-Komponente übergeben.

(normalerweise würde ich das so machen )

Was ist der einfachste und richtige Weg, dies mit React Router zu tun?

Answer 1

Sie könnten auch das RouteHandler-Mixin verwenden, um das Wrapper-Komponente zu vermeiden und den Zustand des Elternelements leichter als Props weiterzugeben:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var RouteHandler = require('react-router/modules/mixins/RouteHandler');

var Index = React.createClass({
      mixins: [RouteHandler],
      render: function () {
        var handler = this.getRouteHandler({ myProp: 'Wert'});
        return (

                Einige Kopfzeile
                {handler}

        );
  }
});

var routes = (

);

ReactRouter.run(routes, function (Handler) {
  React.render(, document.body);
});

Answer 2

Sie können Props über den wie folgt übergeben:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    var props = this.props; // oder möglicherweise this.state
    return (

            Ein Header

    );
  }
});

Der Nachteil dabei ist, dass Sie Props unüberlegt übergeben. So kann es sein, dass Comments Props erhält, die eigentlich für ein anderes Komponent bestimmt sind, abhängig von Ihrer Routenkonfiguration. Es ist nicht allzu schlimm, da props unveränderlich ist, aber es kann problematisch sein, wenn zwei verschiedene Komponenten eine Prop namens foo mit unterschiedlichen Werten erwarten.

Answer 3

In 1.0 und 2.0 können Sie createElement prop von Router verwenden, um genau anzugeben, wie Ihr Zi element erstellt werden soll. Dokumentationsquelle

function createWithDefaultProps(Component, props) {
    return ;
}

// und dann    

    ...

Answer 4

React Router v 4-Lösung

Ich bin heute früh auf diese Frage gestoßen, und hier ist das Muster, das ich verwende. Hoffentlich ist dies nützlich für alle, die nach einer aktuellen Lösung suchen.

Ich bin mir nicht sicher, ob dies die beste Lösung ist, aber das ist mein aktuelles Muster dafür. Ich habe normalerweise ein Kernverzeichnis, in dem ich meine häufig verwendeten Komponenten mit ihren relevanten Konfigurationen (Loader, Modals, etc.) aufbewahre, und ich füge eine Datei wie diese hinzu:

import React from 'react'
import { Route } from 'react-router-dom'

const getLocationAwareComponent = (component) => (props) => (
   React.createElement(component, 
{...routeProps, ...props})}/>
)

export default getLocationAwareComponent

Dann werde ich in der betreffenden Datei Folgendes tun:

import React from 'react'
import someComponent from 'components/SomeComponent'
import { getLocationAwareComponent } from 'components/Core/getLocationAwareComponent'
const SomeComponent = getLocationAwareComponent(someComponent)

// im Render-Methodenbereich:

Sie werden bemerken, dass ich den Standardexport meiner Komponente als bescheidenes Kamelkasus importiere, was es mir ermöglicht, die neue, ortsbezogene Komponente in CamelCase zu benennen, damit ich sie normal verwenden kann. Abgesehen von der zusätzlichen Importzeile und der Zuweisungszeile verhält sich die Komponente wie erwartet und erhält alle ihre Props normal, mit dem Zusatz aller Routenprops. Daher kann ich mit this.props.history.push() fröhlich aus den Lebenszyklusmethoden der Komponente umleiten, den Standort überprüfen usw.

Hoffe, das hilft!

Answer 5

Ich habe das bereits hier beantwortet.

Hier sind einige Möglichkeiten, wie Sie props an ein Routenkomponente übergeben können.

Mit dem react-router v5 können wir Routen erstellen, indem wir sie mit einem Route-Komponente umhüllen, damit wir props einfach an die gewünschte Komponente übergeben können, wie hier gezeigt:

Ebenso können Sie in v5 das children-Attribut verwenden.

} />

Wenn Sie react-router v4 verwenden, können Sie es mit dem render-Attribut übergeben.

Notiz - Zitierend aus der React Router children-func-Dokumentation

Manchmal müssen Sie rendern, unabhängig davon, ob der Pfad mit dem Standort übereinstimmt oder nicht. In solchen Fällen können Sie die Funktion children-Attribut verwenden. Es funktioniert genauso wie render, außer dass es aufgerufen wird, ob ein Übereinstimmung vorliegt oder nicht.

 } />

(ursprünglich veröffentlicht auf https://reactgo.com/react-router-pass-props/)