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 (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

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

Ich möchte einige Eigenschaften an die CommentsKomponente übergeben.

(Normalerweise würde ich das gerne machen <Comments myprop="value" />)

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

AKTUALISIEREN

Seit der neuen Version ist es möglich, Requisiten Routeohne Verwendung eines Wrappers direkt über die Komponente zu übergeben. Zum Beispiel mit renderprop .

Komponente:

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      <React.Fragment>
        <h1>Greeting page</h1>
        <p>
          {text} {name}
        </p>
      </React.Fragment>
    );
  }
}

Verwendungszweck:

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

Code und Box Beispiel

ALTE VERSION

Mein bevorzugter Weg ist das Umschließen der CommentsKomponente und das Übergeben des Wrappers als Routenhandler.

Dies ist Ihr Beispiel mit Änderungen:

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

var CommentsWrapper = React.createClass({
  render: function () {
    return (
      <Comments myprop="myvalue"/>
    );
  }
});

var Index = React.createClass({
  render: function () {
    return (
      <div>
        <header>Some header</header>
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

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

Wenn Sie lieber keine Wrapper schreiben möchten, können Sie dies wahrscheinlich tun:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

Kopieren aus den Kommentaren von ciantic in der akzeptierten Antwort:

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

Dies ist meiner Meinung nach die eleganteste Lösung. Es klappt. Half mir.

Dies ist die Lösung von Rajesh , ohne die unbequemen Kommentare von Yuji und für React Router 4 aktualisierten.

Der Code wäre wie folgt:

<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>

Beachten Sie, dass ich renderanstelle von component. Der Grund ist, unerwünschtes erneutes Montieren zu vermeiden . Ich übergebe das auch propsan diese Methode und verwende die gleichen Requisiten für die Comments-Komponente mit dem Object Spread-Operator (ES7-Vorschlag).

Nur eine Fortsetzung von ColChs Antwort. Es ist ziemlich einfach, die Umhüllung einer Komponente zu abstrahieren:

var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

<Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/>

Ich habe diese Lösung noch nicht getestet, daher ist jedes Feedback wichtig.

Es ist wichtig zu beachten, dass bei dieser Methode alle über den Router gesendeten Requisiten (z. B. Parameter) überschrieben / entfernt werden.

Sie können Requisiten übergeben, indem Sie sie an <RouteHandler>(in v0.13.x) oder an die Route-Komponente selbst in v1.0 übergeben.

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

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

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

Alle Kinderbetreuer erhalten die gleichen Requisiten - dies kann je nach den Umständen nützlich sein oder auch nicht.

Mit ES6 können Sie Komponenten-Wrapper einfach inline machen:

<Route path="/" component={() => <App myProp={someValue}/>} >

Wenn Sie Kinder übergeben müssen:

<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >

React-Router v4 alpha

Jetzt gibt es einen neuen Weg, dies zu tun, obwohl er der vorherigen Methode sehr ähnlich ist.

import { Match, Link, Miss } from 'react-router';
import Homepage from './containers/Homepage';

const route = {
    exactly: true,
    pattern: '/',
    title: `${siteTitle} - homepage`,
    component: Homepage
  }

<Match { ...route } render={(props) => <route.component {...props} />} />

PS Dies funktioniert nur in der Alpha-Version und wurde nach der Alpha-Version v4 entfernt. In v4 ist es wieder einmal mit dem Pfad und den genauen Requisiten.

react-lego Eine Beispiel-App enthält Code, der genau dies in routen.js in ihrem Zweig react-router-4 ausführt

Hier ist die sauberste Lösung, die ich mir ausgedacht habe (React Router v4):

<Route
  path="/"
  component={props => <MyComponent {...props} foo="lol" />}
/>

MyComponenthat noch props.matchund props.locationund hat props.foo === "lol".

Wickeln Sie es mit einer zustandslosen Funktionskomponente ein:

<Router>
  <Route 
    path='/' 
    component={({children}) => 
      <MyComponent myProp={'myVal'}>{children}</MyComponent/>
    }/>
</Router>

Sie können auch das RouteHandler-Mixin verwenden, um die Wrapper-Komponente zu vermeiden und den Status der Eltern einfacher als Requisiten 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: 'value'});
        return (
            <div>
                <header>Some header</header>
                {handler}
           </div>
        );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

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

Sie können Requisiten <RouterHandler/>wie folgt abgeben :

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

var Index = React.createClass({
  render: function () {
    var props = this.props; // or possibly this.state
    return (
        <div>
            <header>Some header</header>
            <RouteHandler {...props} />
        </div>
    );
  }
});

Der Nachteil dabei ist, dass Sie wahllos Requisiten übergeben. So Commentskann bis Empfangen Requisiten beenden , die wirklich für eine andere Komponente bestimmt sind , je nach Route und Konfiguration. Es ist keine große Sache, da propses unveränderlich ist, aber dies kann problematisch sein, wenn zwei verschiedene Komponenten eine Requisite mit dem Namen erwarten, fooaber mit unterschiedlichen Werten.

In 1.0 und 2.0 können Sie mit createElementprop of Routerangeben, wie genau Ihr Zielelement erstellt werden soll. Dokumentationsquelle

function createWithDefaultProps(Component, props) {
    return <Component {...props} myprop="value" />;
}

// and then    
<Router createElement={createWithDefaultProps}>
    ...
</Router>

Sie können auch es6- und zustandslose Funktionen kombinieren , um ein viel saubereres Ergebnis zu erzielen :

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

let dashboardWrapper = () => <Dashboard {...props} />,
    commentsWrapper = () => <Comments {...props} />,
    index = () => <div>
        <header>Some header</header>
        <RouteHandler />
        {this.props.children}
    </div>;

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

Reagieren Sie auf die Lösung von Router v 4

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

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

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

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

export default getLocationAwareComponent

Dann mache ich in der fraglichen Datei Folgendes:

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

// in render method:
<SomeComponent someProp={value} />

Sie werden feststellen, dass ich den Standardexport meiner Komponente als bescheidenen Kamelkoffer importiere, wodurch ich die neue, standortbezogene Komponente in CamelCase benennen kann, damit ich sie normal verwenden kann. Abgesehen von der zusätzlichen Importzeile und der Zuweisungszeile verhält sich die Komponente wie erwartet und empfängt alle ihre Requisiten normal, wobei alle Routenrequisiten hinzugefügt werden. Auf diese Weise kann ich mit this.props.history.push () problemlos von Methoden des Komponentenlebenszyklus umleiten, den Speicherort überprüfen usw.

Hoffe das hilft!

Für React Router 2.x.

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

und auf deinen Routen ...

<Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}>
</Route>

Stellen Sie sicher, dass der 3. Parameter ein Objekt ist wie : { checked: false }.

Das Problem mit dem React Router ist, dass er Ihre Komponenten rendert und Sie so daran hindert, Requisiten einzugeben. Mit dem Navigationsrouter hingegen können Sie Ihre eigenen Komponenten rendern. Das bedeutet, dass Sie nicht durch Reifen springen müssen, um Requisiten wie im folgenden Code und in der dazugehörigen JsFiddle- Show zu übergeben.

var Comments = ({myProp}) => <div>{myProp}</div>;

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

stateNavigator.states.comments.navigated = function(data) {
  ReactDOM.render(
    <Comments myProp="value" />,
    document.getElementById('content')
  );
}

stateNavigator.start();

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

class Index extends React.Component {

  constructor(props) {
    super(props);
  }
  render() {
    const foo = (this.props.route) ? this.props.route.foo : this.props.foo;
    return (
      <h1>
        Index - {foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

Oder Sie könnten es so machen:

export const Index = ({foo, route}) => {
  const content = (foo) ? foo : (route) ? route.foo : 'No content found!';
  return <h1>{content}</h1>
};

Für den React-Router 2.5.2 ist die Lösung so einfach:

    //someConponent
...
render:function(){
  return (
    <h1>This is the parent component who pass the prop to this.props.children</h1>
    {this.props.children && React.cloneElement(this.props.children,{myProp:'value'})}
  )
}
...

Mithilfe einer benutzerdefinierten Routenkomponente ist dies in React Router v3 möglich.

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var routes = (
  <Route path="/" handler={Index}>
    <MyRoute myprop="value" path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

Der <MyRoute>Komponentencode sollte ungefähr so ​​aussehen:

import React from 'react';
import { Route } from 'react-router';
import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils';

const MyRoute = () => <div>&lt;MyRoute&gt; elements are for configuration only and should not be rendered</div>;

MyRoute.createRouteFromReactElement = (element, parentRoute) => {
    const { path, myprop } = element.props;
    // dynamically add crud route
    const myRoute = createRoutesFromReactChildren(
        <Route path={path} />,
        parentRoute
    )[0];
    // higher-order component to pass myprop as resource to components
    myRoute.component = ({ children }) => (
        <div>
            {React.Children.map(children, child => React.cloneElement(child, { myprop }))}
        </div>
    );
    return myRoute;
};

export default MyRoute;

Weitere Informationen zum Ansatz der benutzerdefinierten Routenkomponente finden Sie in meinem Blogbeitrag zum Thema: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

Dies ist wahrscheinlich der beste Weg, um React-Router-Dom mit einem Cookie-Handler zu verwenden

in index.js

import React, { Component } from 'react'
import {Switch,Route,Redirect} from "react-router-dom"
import {RouteWithLayout} from "./cookieCheck"

import Login from "../app/pages/login"
import DummyLayout from "../app/layouts/dummy"
import DummyPage from "../app/pages/dummy" 

export default ({props})=>{
return(
    <Switch>
        <Route path="/login" component={Login} />
        <RouteWithLayout path="/dummy" layout={DummyLayout} component={DummyPage} 
        {...props}/>
        <Redirect from="/*" to="/login" />
    </Switch>
  )
}

und verwenden Sie einen CookieCheck

import React , {createElement} from 'react'
import {Route,Redirect} from "react-router-dom"
import {COOKIE,getCookie} from "../services/"

export const RouteWithLayout = ({layout,component,...rest})=>{
    if(getCookie(COOKIE)==null)return <Redirect to="/login"/>
        return (
        <Route {...rest} render={(props) =>
            createElement(layout, {...props, ...rest}, createElement(component, 
      {...props, ...rest}))
       }
      />
    )
}

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      data:null
    }


  }
 componentDidMount(){
   database.ref().on('value', (snapshot) =>{
     this.setState({
       data : snapshot.val()
      })
   });
 }

  render(){
  //  const { data } = this.state
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path = "/" component = { LandingPage }  />
        <Route 
          path='/signup' 
          render = { () => <Signup  data = {this.state.data} />} />
        </Switch>
    </BrowserRouter>

  );
  }
};

export default App;

Verwenden Sie die oben beschriebene Lösung und dies funktioniert in Version 3.2.5.

<Route
  path="/foo"
  component={() => (
    <Content
      lang="foo"
      meta={{
        description: lang_foo.description
      }}
    />
  )}
/>

oder

<Route path="/foo">
  <Content
    lang="foo"
    meta={{
      description: lang_foo.description
    }}
  />
</Route>