React Router kullanarak React.js uygulamam için aşağıdaki yapıya sahibim :

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

Bazı özellikleri Commentsbileşene geçirmek istiyorum .

(normalde böyle yaparım <Comments myprop="value" />)

React Router ile bunu yapmanın en kolay ve doğru yolu nedir?

GÜNCELLEME

Yeni sürümden bu yana, sahne malzemesini Routebir Sarıcı kullanmadan doğrudan bileşen üzerinden geçirmek mümkündür . Örneğin, prop kullanarakrender .

Bileşen:

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

Kullanımı:

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

Codesandbox Örneği

ESKİ VERSİYON

Tercih ettiğim yol, Commentsbileşeni sarmak ve sargıyı bir rota işleyicisi olarak geçirmektir.

Değişikliklerin uygulandığı örnek:

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

Paketleyici yazmak istemiyorsanız, sanırım bunu yapabilirsiniz:

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

Kabul edilen yanıtta yorumlardan kiantik tarafından kopyalanması :

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

Bence bu en zarif çözüm. İşe yarıyor. Bana yardımcı oldu.

Bu Yuji tarafından yorum ve rahatsız edici React Router 4 için güncellenen olmadan, Rajesh çözümdür .

Kod şöyle olurdu:

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

renderBunun yerine kullandığımı unutmayın component. Nedeni, istenmeyen yeniden montajdan kaçınmaktır . Ben de propsbu yönteme geçmek ve Yorumlar bileşen nesne yayma işleci (ES7 teklif) ile aynı sahne kullanıyorum.

Sadece ColCh'in cevabını takip ediyorum. Bir bileşenin sargısını soyutlamak oldukça kolaydır:

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

Bu çözümü henüz test etmedim, bu nedenle herhangi bir geri bildirim önemlidir.

Bu yöntemle, Yönlendirici üzerinden gönderilen tüm aksesuarların (parametreler gibi) üzerine yazıldığını / kaldırıldığını not etmek önemlidir.

<RouteHandler>Destekleri (v0.13.x dosyasında) veya Route bileşeninin kendisini v1.0'da ileterek geçebilirsiniz ;

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

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

( https://github.com/rackt/react-router/releases/tag/v1.0.0 adresindeki yükseltme kılavuzundan )

Tüm çocuk işleyicileri aynı sahne setini alacaktır - bu duruma bağlı olarak yararlı olabilir veya olmayabilir.

ES6'yı kullanarak bileşen paketlerini satır içinde yapabilirsiniz:

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

Çocukları geçmeniz gerekiyorsa:

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

React-router v4 alfa

şimdi, önceki yönteme çok benzemesine rağmen, bunu yapmanın yeni bir yolu var.

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 Bu yalnızca alfa sürümünde çalışır ve v4 alfa sürümünden sonra kaldırılmıştır. En son v4'te, yol ve tam sahne ile bir kez daha.

tepki-lego örnek bir uygulama tam olarak tepki-router-4 dalında route.js bunu yapan kod içeriyor

İşte bulduğum en temiz çözüm (React Router v4):

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

MyComponenthala var props.matchve props.locationvar props.foo === "lol".

Durum bilgisi olmayan bir işlev bileşeniyle sarın:

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

Sarma bileşenini önlemek ve üst öğe durumunu sahne olarak daha kolay bir şekilde geçirmek için RouteHandler karışımını da kullanabilirsiniz:

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

Aşağıdaki <RouterHandler/>gibi sahne içinden geçebilirsiniz :

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

Bunun dezavantajı, gelişigüzel bir şekilde sahne geçiyorsunuz. Bu nedenle Comments, rota yapılandırmanıza bağlı olarak gerçekten farklı bir bileşen için tasarlanan aksesuarlar alınabilir. propsDeğişmez olduğu için çok büyük bir anlaşma değil , ancak iki farklı bileşen adlı fooancak farklı değerlere sahip bir destek bekliyorsa bu sorunlu olabilir .

1.0 ve 2.0'da , hedef öğenizi tam olarak nasıl oluşturacağınızı belirtmek için createElementprop of komutunu kullanabilirsiniz Router. Dokümantasyon kaynağı

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

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

Daha temiz bir sonuç elde etmek için es6 ve durum bilgisi olmayan işlevleri de birleştirebilirsiniz :

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 çözümü

Bu soruya bugün daha önce rastladım ve işte kullandığım kalıp bu. Umarım bu daha güncel bir çözüm arayan herkes için yararlıdır.

Bunun en iyi çözüm olup olmadığından emin değilim , ama bu benim şu anki kalıbım. Ben genellikle ilgili yapılandırmaları (yükleyiciler, modals, vb) ile yaygın olarak kullanılan bileşenleri tutmak bir çekirdek dizini var ve ben böyle bir dosya dahil:

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

Ardından, söz konusu dosyada aşağıdakileri yapacağım:

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

Bileşenimin varsayılan dışa aktarmasını mütevazi deve kasası olarak içe aktardığımı fark edeceksiniz. Ek içe aktarma hattı ve atama hattı dışında, bileşen beklendiği gibi davranır ve tüm rota desteklerinin eklenmesiyle tüm desteklerini normal şekilde alır. Böylece, this.props.history.push () ile bileşen yaşam döngüsü yöntemlerinden mutlu bir şekilde yeniden yönlendirebilirim, konumu kontrol edebilirim, vb.

Bu yardımcı olur umarım!

Reaksiyon yönlendirici 2.x için.

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

ve rotalarınızda ...

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

emin olun 3 param gibi bir nesnedir: { checked: false }.

React Router ile ilgili sorun, bileşenlerinizi oluşturması ve böylece sahne içinden geçmenizi durdurmasıdır. Navigasyon yönlendirici , diğer taraftan, kendi bileşenlerini görüntülemeyi sağlar. Bu, aşağıdaki kod ve beraberindeki JsFiddle şovu gibi desteklerden geçmek için herhangi bir çembere atlamanız gerekmediği anlamına gelir .

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

Bileşeni Rajesh Naroth yanıtına göre yönlendiricili veya yönlendiricisiz kullanın.

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

Veya bunu şu şekilde yapabilirsiniz:

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

tepki yönlendiricisi 2.5.2 için çözüm çok kolaydır:

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

Özel bir rota bileşeni kullanarak , React Router v3'te bu mümkündür.

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

Gelince <MyRoute>bileşen kod, bir şeyler gibi olmalıdır:

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;

Özel rota bileşeni yaklaşımı hakkında daha fazla bilgi için, konu hakkındaki blog yayınımı kontrol edin: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

bu büyük olasılıkla bir çerez işleyici ile tepki-yönlendirici-dom kullanmanın en iyi yoludur

index.js içinde

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

ve bir çerez kullanın

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;

Yukarıdaki gibi bir çözüm kullanın ve bu v3.2.5'te çalışır.

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

veya

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