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önnen Props übergeben, indem Sie sie an (in v0.13.x) oder das Route-Komponent selbst in v1.0 übergeben;

// v0.13.x

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}

(aus dem Upgrade-Leitfaden unter https://github.com/rackt/react-router/releases/tag/v1.0.0)

Alle Unter-Handler erhalten den gleichen Satz von Props - dies kann je nach Situation nützlich oder nicht sein.

Answer 2

Mit ES6 können Sie einfach Komponentenumhüllungen inline erstellen:

} >

Wenn Sie Kinder übergeben müssen:

{props.children}} >

Answer 3

React-router v4 alpha

jetzt gibt es eine neue Methode, dies zu tun, obwohl sie sehr ähnlich zur vorherigen Methode ist.

import { Übereinstimmung, Verknüpfung, Fehlen } from 'react-router';
import Homepage from './containers/Homepage';

const route = {
    genau: true,
    Muster: '/',
    Titel: `${siteTitle} - Homepage`,
    Komponente: Homepage
  }

<Übereinstimmung { ...route } render={(props) => } />

P.S. Dies funktioniert nur in der Alpha-Version und wurden nach der V4 Alpha-Veröffentlichung entfernt. In der neuesten V4-Version ist es erneut, mit den path- und exact-Eigenschaften.

react-lego eine Beispiel-App enthält Code, der genau das in routes.js auf seinem react-router-4-Zweig

Answer 4

Hier ist die sauberste Lösung, die mir eingefallen ist (React Router v4):

 }
/>

MyComponent hat immer noch props.match und props.location, und props.foo === "lol".

Answer 5

Wrap it with a stateless function component:

      {children}
    }/>