J'ai la structure suivante pour mon application React.js utilisant 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);
});

Je souhaite transmettre certaines propriétés au Commentscomposant.

(normalement je ferais ça comme <Comments myprop="value" />)

Quelle est la manière la plus simple et la plus appropriée de le faire avec React Router?

METTRE À JOUR

Depuis la nouvelle version, il est possible de passer des accessoires directement via le Routecomposant, sans utiliser de Wrapper. Par exemple, en utilisant renderprop .

Composant:

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>
    );
  }
}

Usage:

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

Exemple de code et de boîte

ANCIENNE VERSION

Ma façon préférée est d'envelopper le Comments composant et de passer l'encapsuleur en tant que gestionnaire d'itinéraire.

Voici votre exemple avec des changements appliqués:

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);
});

Si vous préférez ne pas écrire de wrappers, je suppose que vous pouvez le faire:

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}/>
);

Copie des commentaires de ciantic dans la réponse acceptée:

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

C'est la solution la plus gracieuse à mon avis. Ça marche. M'a aidé.

Il s'agit de la solution de Rajesh , sans les inconvénients commentés par yuji , et mise à jour pour React Router 4.

Le code serait comme ceci:

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

Notez que j'utilise à la renderplace de component. La raison est d'éviter un remontage indésirable . Je passe également le propsà cette méthode, et j'utilise les mêmes accessoires sur le composant Commentaires avec l'opérateur de propagation d'objet (proposition ES7).

Juste un suivi de la réponse de ColCh. Il est assez facile d'abstraire l'habillage d'un composant:

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})}/>

Je n'ai pas encore testé cette solution, donc tout commentaire est important.

Il est important de noter qu'avec cette méthode, tous les accessoires envoyés via le routeur (tels que les paramètres) sont remplacés / supprimés.

Vous pouvez passer des accessoires en les passant à <RouteHandler>(dans la v0.13.x) ou au composant Route lui-même dans la v1.0;

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

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

(à partir du guide de mise à niveau à https://github.com/rackt/react-router/releases/tag/v1.0.0 )

Tous les gestionnaires d'enfants recevront le même ensemble d'accessoires - cela peut être utile ou non selon les circonstances.

En utilisant ES6, vous pouvez simplement rendre les wrappers de composants en ligne:

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

Si vous devez passer des enfants:

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

React-router v4 alpha

maintenant, il existe une nouvelle façon de le faire, bien que très similaire à la méthode précédente.

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 Cela ne fonctionne que dans la version alpha et a été supprimé après la version alpha v4. Dans la dernière version v4, c'est encore une fois, avec le chemin et les accessoires exacts.

react-lego un exemple d'application contient du code qui fait exactement cela dans routes.js sur sa branche react-router-4

Voici la solution la plus propre que j'ai trouvée (React Router v4):

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

MyComponenta encore props.matchet props.location, et a props.foo === "lol".

Enveloppez-le avec un composant de fonction sans état:

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

Vous pouvez également utiliser le mixin RouteHandler pour éviter le composant wrapper et transmettre plus facilement l'état du parent comme accessoires:

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);
});

Vous pouvez passer des accessoires via <RouterHandler/>comme ceci:

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>
    );
  }
});

L'inconvénient est que vous passez des accessoires sans discernement. CommentsCela peut donc finir par recevoir des accessoires qui sont vraiment destinés à un composant différent en fonction de la configuration de vos itinéraires. Ce n'est pas énorme car il propsest immuable, mais cela peut être problématique si deux composants différents attendent un accessoire nommé foomais avec des valeurs différentes.

Dans 1.0 et 2.0, vous pouvez utiliser createElementprop of Routerpour spécifier comment créer exactement votre élément cible. Source de documentation

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

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

Vous pouvez également combiner les fonctions es6 et sans état pour obtenir un résultat beaucoup plus net :

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
      }
    ]
}

Solution React Router v 4

Je suis tombé sur cette question plus tôt dans la journée, et voici le modèle que j'utilise. J'espère que cela sera utile à tous ceux qui recherchent une solution plus actuelle.

Je ne sais pas si c'est la meilleure solution, mais c'est mon schéma actuel pour cela. J'ai généralement un répertoire Core où je conserve mes composants couramment utilisés avec leurs configurations pertinentes (chargeurs, modaux, etc.), et j'inclus un fichier comme celui-ci:

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

Ensuite, dans le fichier en question, je ferai ce qui suit:

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} />

Vous remarquerez que j'importe l'exportation par défaut de mon composant comme humble cas de chameau, ce qui me permet de nommer le nouveau composant de localisation dans CamelCase afin que je puisse l'utiliser normalement. Outre la ligne d'importation supplémentaire et la ligne d'affectation, le composant se comporte comme prévu et reçoit tous ses accessoires normalement, avec l'ajout de tous les accessoires d'itinéraire. Ainsi, je peux joyeusement rediriger à partir des méthodes de cycle de vie des composants avec this.props.history.push (), vérifier l'emplacement, etc.

J'espère que cela t'aides!

Pour react router 2.x.

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

et dans vos itinéraires ...

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

assurez - vous que le 3ème est un objet param comme: { checked: false }.

Le problème avec le React Router est qu'il rend vos composants et vous empêche donc de passer des accessoires. Le routeur de navigation , d'autre part, vous permet de rendre vos propres composants. Cela signifie que vous n'avez pas à sauter à travers des cerceaux pour passer dans les accessoires comme le code suivant et le spectacle JsFiddle qui l' accompagne .

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();

Utilisez le composant avec ou sans routeur basé sur la réponse de 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}/>
);

Ou vous pourriez le faire de cette façon:

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

pour le react-router 2.5.2, la solution est si simple:

    //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'})}
  )
}
...

L'utilisation d'un composant d'itinéraire personnalisé est possible dans React Router v3.

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>
);

Quant au <MyRoute>code du composant, il devrait ressembler à:

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;

Pour plus de détails sur l'approche du composant d'itinéraire personnalisé, consultez mon article de blog sur le sujet: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

c'est probablement la meilleure façon d'utiliser react-router-dom avec un gestionnaire de cookies

dans 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>
  )
}

et utilisez un cookie

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;

Utilisez la solution comme ci-dessous et cela fonctionne dans la version 3.2.5.

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

ou

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