Mam następującą strukturę dla mojej aplikacji React.js używającej 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);
});

Chcę przekazać niektóre właściwości do Commentskomponentu.

(normalnie zrobiłbym to tak <Comments myprop="value" />)

Jaki jest najłatwiejszy i właściwy sposób, aby to zrobić za pomocą React Router?

AKTUALIZACJA

Od nowej wersji możliwe jest przekazywanie rekwizytów bezpośrednio przez Routekomponent, bez użycia Wrappera. Na przykład za pomocą renderprop .

Składnik:

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

Stosowanie:

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

Przykład Codesandbox

STARA WERSJA

Moim preferowanym sposobem jest owijanie Commentskomponentu i przekazywanie opakowania jako procedury obsługi trasy.

To jest twój przykład z zastosowanymi zmianami:

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

Jeśli wolisz nie pisać opakowań, myślę, że możesz to zrobić:

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

Kopiowanie z komentarzy ciantic w przyjętej odpowiedzi:

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

To moim zdaniem najbardziej wdzięczne rozwiązanie. To działa. Pomogło mi.

Jest to rozwiązanie od Rajesh , bez niewygodnego komentarza yuji , i zaktualizowane do React Router 4.

Kod wyglądałby tak:

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

Zauważ, że używam renderzamiast component. Powodem jest uniknięcie niepożądanego ponownego montażu . Przekazuję również propstę metodę i używam tych samych rekwizytów w komponencie Komentarze z operatorem rozkładania obiektów (propozycja ES7).

Tylko kontynuacja odpowiedzi ColCh. Wyodrębnienie opakowania komponentu jest dość łatwe:

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

Nie przetestowałem jeszcze tego rozwiązania, więc każda opinia jest ważna.

Należy zauważyć, że dzięki tej metodzie wszelkie rekwizyty wysyłane przez router (takie jak parametry) są nadpisywane / usuwane.

Możesz przekazywać rekwizyty, przekazując je do <RouteHandler>(w wersji 0.13.x) lub samego komponentu trasy w wersji 1.0;

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

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

(z przewodnika aktualizacji na https://github.com/rackt/react-router/releases/tag/v1.0.0 )

Wszystkie osoby zajmujące się dziećmi otrzymają ten sam zestaw rekwizytów - może to być przydatne lub nie, zależnie od okoliczności.

Za pomocą ES6 możesz po prostu łączyć opakowania komponentów:

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

Jeśli potrzebujesz przekazać dzieci:

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

React-router v4 alpha

teraz jest na to nowy sposób, choć bardzo podobny do poprzedniej metody.

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 Działa to tylko w wersji alfa i zostały usunięte po wydaniu wersji v4 alpha. W v4 najpóźniej jest ponownie, ze ścieżką i dokładnymi rekwizytami.

reag -lego przykładowa aplikacja zawiera kod, który robi to dokładnie w route.js w swojej gałęzi React-router-4

Oto najczystsze rozwiązanie, jakie wymyśliłem (React Router v4):

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

MyComponentwciąż ma props.matchi props.location, i ma props.foo === "lol".

Zawiń go składnikiem funkcji bezstanowej:

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

Możesz także użyć mixinu RouteHandler, aby uniknąć komponentu otoki i łatwiej przekazać stan rodzica jako rekwizyty:

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

Możesz przekazać rekwizyty w <RouterHandler/>następujący sposób:

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

Minusem tego jest to, że bezkrytycznie podajesz rekwizyty. CommentsMoże więc otrzymać rekwizyty, które naprawdę są przeznaczone dla innego komponentu, w zależności od konfiguracji tras. Nie jest to wielka sprawa, ponieważ propsjest niezmienna, ale może to być problematyczne, jeśli dwa różne komponenty oczekują rekwizytu o nazwie, fooale o różnych wartościach.

W wersjach 1.0 i 2.0 możesz użyć createElementprop, Routeraby określić, jak dokładnie utworzyć element docelowy. Źródło dokumentacji

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

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

Możesz także łączyć funkcje es6 i bezstanowe, aby uzyskać znacznie czystszy wynik:

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

React Router v 4 solution

Natknąłem się dziś na to pytanie i oto wzór, którego używam. Mamy nadzieję, że jest to przydatne dla każdego, kto szuka bardziej aktualnego rozwiązania.

Nie jestem pewien, czy jest to najlepsze rozwiązanie, ale taki jest mój obecny wzorzec. Zazwyczaj mam katalog Core, w którym przechowuję często używane komponenty wraz z ich odpowiednimi konfiguracjami (moduły ładujące, moduły itp.) I dołączam taki plik:

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

Następnie w danym pliku wykonaj następujące czynności:

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

Zauważysz, że importuję domyślny eksport mojego komponentu jako pokornego wielbłąda, co pozwala mi nazwać nowy komponent rozpoznający lokalizację w CamelCase, dzięki czemu mogę go normalnie używać. Oprócz dodatkowej linii importu i linii przypisania, komponent zachowuje się zgodnie z oczekiwaniami i odbiera wszystkie swoje rekwizyty normalnie, z dodaniem wszystkich rekwizytów trasy. W ten sposób mogę z przyjemnością przekierowywać metody cyklu życia komponentów za pomocą this.props.history.push (), sprawdzać lokalizację itp.

Mam nadzieję że to pomoże!

Dla reagowania router 2.x.

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

i na twoich trasach ...

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

upewnić 3rd param jest przedmiotem takich jak: { checked: false }.

Problem z React Router polega na tym, że renderuje on twoje komponenty, a więc zatrzymuje przekazywanie w rekwizytach. Router Nawigacja , z drugiej strony, pozwala na renderowanie własnych komponentów. Oznacza to, że nie musisz przeskakiwać żadnych obręczy, aby przekazać rekwizyty jako poniższy kod i towarzyszący program JsFiddle .

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

Użyj komponentu z routerem lub bez, w oparciu o odpowiedź 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}/>
);

Lub możesz to zrobić w ten sposób:

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

w przypadku routera reagującego 2.5.2 rozwiązanie jest takie proste:

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

Przy użyciu niestandardowego komponentu trasy jest to możliwe w 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>
);

Jeśli chodzi o <MyRoute>kod komponentu, powinno to być coś takiego:

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;

Aby uzyskać więcej informacji na temat niestandardowego komponentu trasy, sprawdź mój post na blogu na ten temat: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

jest to prawdopodobnie najlepszy sposób na użycie domagania-router-dom z programem obsługi plików cookie

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

i użyj 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;

Użyj powyższego rozwiązania, a to działa w wersji 3.2.5.

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

lub

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