React-Router - Requisiten an Handler-Komponente übergeben

315

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?

Kosmetika
quelle
Das Problem hier und in solchen ähnlichen Fällen, insbesondere bei den in einigen langs geschriebenen Frameworks oder Bibliotheken, ist ein gewisser Mangel an an Kombinationsmitteln (MoC). Primitive scheinen in React in Ordnung zu sein. Sie sind ziemlich gut und definieren Komponenten mit Primitiven in React-Elementen und der Komponente MoC , was auch in React in Ordnung zu sein scheint. Die Kombinationsmittel sind jedoch unvollständig. Man muss in der Lage sein, die Requisiten an eine Komponente zu übergeben, während eine Komponente mit einer anderen kombiniert wird. Dabei spielt es keine Rolle, ob eine Komponente als untergeordnetes Element in eine andere Komponente eingefügt oder eine Komponente als Requisiten an eine andere übergeben wird.
Selçuk
Mit einer Syntax wie <ComponentA x={<ComponentB y={<ComponentC z={} />} />} /> OR <ComponentA x={ComponentB(ComponentC()) } /> Andernfalls treten diese Probleme von Kombinationen von Abstraktionen erneut auf und erfordern einige weniger als optimale und indirekte Lösungen, die als Problemumgehungen wie Wrapping usw. bezeichnet werden. Abstraktionen müssen erstklassige Bürger als Grundelemente sein, unabhängig davon, was die Wahrnehmung der ersten Klasse bedeutet.
Selçuk

Antworten:

152

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);
});
ColCh
quelle
58
Ich habe das gleiche Problem, aber wird diese Lösung nicht schnell ausführlich?
captDaylight
8
Stimmen Sie mit captDaylight überein, es wird ausführlich. Wäre lieber besser damit umzugehen!
Mattias Hallström
6
@mattiashallstrom IMO, der bessere Weg in 1.0 ist, einfach die Eigenschaft zur Route hinzuzufügen. Siehe die Antwort von Thomas E.
k00k
28
Sie könnten dort auch eine zustandslose Komponentensyntax (nur Lambda) hinzufügen, sie ist ziemlich kurz<Route path="comments" component={() => (<Comments myProp="value" />)}/>
Ciantic
33
Ich werde niemals damit einverstanden sein, zusätzliche Komponenten zu erstellen, nur um Eigenschaften zu übergeben, die der "bevorzugte Weg" sind. Es ist ausführlich, kompliziert, fehleranfällig und in jeder erdenklichen Weise einfach falsch. Es ist vielleicht die EINZIGE Möglichkeit, die der Reaktionsrouter zulässt, aber es als "bevorzugt" zu bezeichnen, ist eine Strecke. Von wem bevorzugt?
Szczepan Hołyszewski
260

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}/>
);
Thomas E.
quelle
11
Dies ist eine richtige Antwort. Im React-Router 1.0 können Sie ein routeeinfaches Objekt in Ihrer Komponente erhalten. Hier ist die Antwort des Github-Problems: github.com/rackt/react-router/issues/615#issuecomment-100432086
ycavatars
4
Dies ist die einfache Antwort, nach der ich gesucht habe. Die anderen Techniken funktionieren, erfordern jedoch das 10-fache der Codemenge. Funktioniert gut für v1.0.x. Der einzige Nachteil, den ich sehen kann, ist, wenn Sie beabsichtigen, dieselbe Komponente sowohl mit als auch ohne Router-Container zu verwenden. Aber für mich wurden alle meine Top-Level-Komponenten 1: 1 mit Routen abgebildet.
Killthrush
12
Vielen Dank! Wenn sich jemand wundert, ist die Eigenschaft foo in Ihrer Komponente verfügbar als: this.props.route.foo
k00k
8
Kann diese als richtige Antwort festgelegt werden, um Verwirrung zu vermeiden?
Archibald
2
Nee! Siehe Rajesh Naroth Antwort für die echte Lösung :)
Alex
114

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.

Rajesh Naroth
quelle
Dies ist im Grunde das gleiche wie die Antwort des Wrappers oben, aber es ist viel weniger wortreich. Mann, diese Syntax ist scheiße. Versuchen Sie, einen_ref
EdH
11
Es ist wie bei einem anonymen Wrapper, daher werden alle injizierten Requisiten (z. B. Ort) übersehen. Man muss Requisiten wie manuell übergeben, component={(props) => (<Comments myProp="value" location={ props.location } />)}aber es wird wieder alles chaotisch
Yuji
1
@JacobThomason Wir rendern die React Router-Konfiguration nicht neu, daher ist es unwahrscheinlich, dass dies zu einer Leistungsminderung führt.
Sebastien Lorber
9
Wenn Sie ab React-Router 4 eine Inline-Funktion bereitstellen, erhalten Sie viele unerwünschte Remountings. Verwenden Sie für das Inline-Rendering die Render-Requisite. Link zu den Dokumenten
Daniel Reina
1
@yuji Um es nicht zu chaotisch zu machen, kann man tun: component={(props) => (<Comments {...props} myProp="value" />)}die injizierten Requisiten zu pflegen
apelsinapa
57

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

Daniel Reina
quelle
Wirklich großartig, um auch unerwünschte Montage zu lösen! +1
GLindqvist
44

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.

Sigmus
quelle
1
Bob, kennst du Verschlüsse? stackoverflow.com/questions/111102/…
Sigmus
3
Und wenn Sie die Abfrage und die Parameter auch vom Router benötigen, funktioniert so etwas wie folgt: return React.createElement(Component, _.assign({}, this.props, props));(Dieser verwendet _.assign, um das kombinierte Objekt zu erstellen ... andere Methoden sind natürlich verfügbar).
Malcolm Dwyer
2
Vielleicht möchten Sie auch die Kinder übergeben. | var wrapComponent = function (Komponente, Requisiten) {return React.createClass ({render: function () {return React.createElement (Komponente, Requisiten, this.props.children);}}); };
Julio Rodrigues
1
Dies ist eine Komponente höherer Ordnung für diejenigen, die nicht mit ihnen vertraut sind facebook.github.io/react/docs/higher-order-components.html
icc97
1
NB Dies ist jetzt für eine alte Version von React Router. Aktuelle v4 hat render, componentund childrenMethoden für Route. Beachten Sie, dass Sie, wie @dgrcode Antwort hervorhebt , renderanstelle voncomponent
icc97
31

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.

Cachvico
quelle
1
Es ist wirklich rätselhaft zu sehen, React.cloneElementdass mehrere Elemente übergeben werden, aber die Funktionssignatur scheint nur ein Reaktionselement zu benötigen. Ich denke, dieses Snippet kann leichter verständlich gemacht werden.
Manu
2
Dies ist eindeutig die beste Antwort auf das Ziel mit den Dokumenten, aber ich stimme auch manu zu, dass es geschrieben werden könnte, um die Verwendung besser zu zeigen. Code spezifischer für die Frage würde aussehen wie: React.cloneElement(this.props.children, {myprop: "value"})oder React.cloneElement(this.props.children, {myprop: this.props.myprop})etc.
Juanitogan
Diese Antwort gewinnt. Es ist auch viel klarer, was inmitten der Dinge vor sich geht, die Router für Sie erledigt. Wenn jemand, der den Code liest, weiß, dass sich Kommentare im Index befinden, schaue ich im Index nach, welche Requisiten an Kommentare gesendet werden. Wenn ich zufällig weiß, dass Comments ein Router-Handler ist, schaue ich mir die Router-Konfiguration an und finde heraus, dass die Index-Eltern Kommentare abgeben, und gehe trotzdem dorthin.
Mjohnsonengr
24

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

Nick
quelle
Das ist schön, aber es geht nicht durch die Kinder, falls es welche gibt.
zpr
@zpr Ich habe ein Beispiel für props.children hinzugefügt
Nick
2
Wie @dgrcode Antwort hervorhebt , sollten Sie renderanstelle voncomponent
icc97
23

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

peter.mouland
quelle
21

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".

cgenco
quelle
13

Wickeln Sie es mit einer zustandslosen Funktionskomponente ein:

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

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);
});
jul
quelle
1
Es ist öffentlich auf dem globalen Bower-Build als ReactRouter.RouteHandlerMixin verfügbar, also denke ich nicht.
Juli
Dies ermöglicht auch das Animieren von Übergängen mit TransitionGroup und CSSTransitionGroup, die ich mit der Wrapper-Methode nicht bearbeiten konnte.
Juli
2
Es ist seltsam, dass dies in offiziellen Dokumenten nicht erwähnt wird.
Kosmetika
Mixins werden von den React-Dokumenten nicht mehr empfohlen: facebook.github.io/react/blog/2016/07/13/…
icc97
12

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.

Meistro
quelle
1
Was bedeuten die drei Perioden / Punkte tun oder Mittelwert in diesem Code:{...props}
Riesen Elk
2
Ich denke, Flux würde die Notwendigkeit vermeiden, den Status von der übergeordneten App an eine Route zu senden. Ich habe den obigen Code zum Laufen gebracht, aber er ist nicht explizit, so dass der versteckte Majic hässlich ist, nicht einfach zu verfolgen und zu verfolgen, was los ist.
Riesen Elk
2
Erklärung des Operators verbreiten . Es ist nicht explizit, aber es ist nicht das Schlimmste, da Sie Requisiten übergeben, die unveränderlich sind.
Meistro
Hier sind ReactJS-Dokumente zum Spread-Operator: facebook.github.io/react/docs/jsx-spread.html und auch facebook.github.io/react/docs/transferring-props.html
Giant Elk
Das hat bei mir funktioniert, aber die richtige Syntax ist {... this.props}
Win
10

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>
Andrew Khmylov
quelle
6

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
      }
    ]
}
Zhiwei Huang
quelle
Ich bin mir nicht sicher, wie das genau funktioniert - aber es sieht falsch aus. Sie verwenden this.propseine Funktion, von der ich mir ziemlich sicher bin, dass sie nicht funktioniert. Wenn Sie reine Funktionen verwenden, anstatt die zu erweitern React.Component, müssen Sie propsals Argument übergeben, siehe die React-Dokumente zu Komponenten und Requisiten
icc97
6

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!

Chris
quelle
4

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

Holyxiaoxin
quelle
1

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();
Graham Mendick
quelle
1

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>
};
Michael Hobbs
quelle
0

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'})}
  )
}
...
min Mai
quelle
0

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

François Zaninotto
quelle
0

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}))
       }
      />
    )
}
Snivio
quelle
0
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;
nik.ss
quelle
0

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>
illvart
quelle