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 auch ES6 und zustandslose Funktionen kombinieren, um ein viel saubereres Ergebnis zu erhalten:

import Dashboard from './Dashboard';
import Comments from './Comments';

let dashboardWrapper = () => ,
    commentsWrapper = () => ,
    index = () => 
        Einige Überschrift

        {this.props.children}
    ;

routes = {
    component: index,
    path: '/',
    childRoutes: [
      {
        path: 'comments',
        component: dashboardWrapper
      }, {
        path: 'dashboard',
        component: commentsWrapper
      }
    ]
}

Answer 2

Für den React-Router 2.x.

const WrappedComponent = (Container, propsToPass, { children }) => {children};

und in deinen Routen...

Stelle sicher, dass das 3. Argument ein Objekt ist, z.B. { checked: false }.

Answer 3

Das Problem mit dem React Router besteht darin, dass er Ihre Komponenten rendert und es daher verhindert, dass Sie Props übergeben. Der Navigation-Router hingegen ermöglicht es Ihnen, Ihre eigenen Komponenten zu rendern. Das bedeutet, dass Sie keine Umwege machen müssen, um Props zu übergeben, wie der folgende Code und der begleitende JsFiddle zeigen.

var Comments = ({myProp}) => {myProp};

var stateNavigator = new Navigation.StateNavigator([
  {key:'comments', route:''}
]);

stateNavigator.states.comments.navigated = function(data) {
  ReactDOM.render(
    ,
    document.getElementById('content')
  );
}

stateNavigator.start();

Answer 4

Verwenden Sie das Komponente basierend auf der Antwort von Rajesh Naroth mit oder ohne Router.

class Index extends React.Component {

  constructor(props) {
    super(props);
  }
  render() {
    const foo = (this.props.route) ? this.props.route.foo : this.props.foo;
    return (

        Index - {foo}

    );
  }
}

var routes = (

);

Oder Sie könnten es auf diese Weise tun:

export const Index = ({foo, route}) => {
  const content = (foo) ? foo : (route) ? route.foo : 'Kein Inhalt gefunden!';
  return {content}
};

Answer 5

Der React Router v5.1 (React >= 16.8) Weg, um dies zu tun:

Jetzt, wenn Sie auf Route Props in Ihrem Komponenten zugreifen möchten, dann können Sie diese Lösung beziehen. Im Falle einer funktionalen Komponente gibt es einen weiteren Hook useParams(), der in diesem Beitrag nicht erwähnt wird.

Weitere Referenz: React Router v5.1