2016-12-21 29 views
1

Ich habe Probleme, meine Reaktions-App zum Laden der Komponente einer untergeordneten Route zu bekommen. Die URL ändert sich, wenn ich dies tue.context.router.push ('/ url'), aber die Komponente, die zum Laden für diese Route benannt ist, wird nicht geladen. Ich habe das in einer anderen Komponente arbeiten, aber diese wird nicht funktionieren. Das einzige, was ich sehen kann, ist, dass das, was nicht funktioniert, eine Stufe tiefer im Routenbaum ist als das, das funktioniert.
Ich habe überall auf SO sowie die react-Router-Dokumentation und verschiedene Tutorials, um zu sehen, ob ich etwas finden könnte, das mir einen Hinweis geben würde, aber leer ausgegangen bin. Hier ist der relevante Code.react-router hashHistory Push-Änderungen nur URL

Client.js - (app.js für die meisten Menschen)

<Router history={hashHistory}> 
    <Route path="/" component={Layout}> 
     <IndexRoute component={Dashboard}></IndexRoute> 
     <Route path="Login" component={Login}></Route> 
     <Route path="accounting"> 
      <Route path="authorize-orders" component={AuthorizeOrders}></Route> 
      <Route path="authorize-card" component={Sale}> 
       <Route path="select-invoices" component={SaleSelectInvoices}></Route> 
      </Route> 
     </Route> 
    </Route> 
</Router> 

SaleSelectInvoices.js

class SaleSelectInvoices extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      bearer: AppStore.getBearer(), 
      customerInvoices: null 
     } 
    } 
    render() { 
     if (!this.state.customerInvoices) { 
      return (<div>Loading...</div>); 
     } 
     return (
      <div> 
       <h1>Authorize Credit Card Payment</h1> 
       <h2>Select Invoices</h2> 
       <div class="row"> 
        <div class="col-md-1">Select</div> 
        <div class="col-md-3">Invoice #</div> 
        <div class="col-md-4">Amount</div> 
        <div class="col-md-4">Charge Amount</div> 
       </div> 

      </div> 

     ); 
    } 
} 
export default SaleSelectInvoices; 

In einem Event-Handler-Funktion klicken ich folgendes tun.

this.context.router.push('/accounting/authorize-card/select-invoices'); 

ich den Kontext Referenz tun ...

Sale.contextTypes = { 
    router: React.PropTypes.object.isRequired 
} 

Sale.js

render() { 
    var opts = {}; 
    if (!this.state.formIsValid) { 
     opts['disabled'] = 'disabled'; 
    } 
    return (
     <div> 
      <h1>Authorize Credit Card Payment</h1> 

      <h2>Select Customer</h2>    
      <form> 
       <input ref="customerNumber" name="customer" 
       onChange={this.handleCustomerInputChange} 
       onBlur={this.validateCustomerNumber} 
       min="86" max="999999" type="numeric" class="customerNumber" />       
       <button {...opts} onClick={this.handleCustomerSelect}>Next</button> 
      </form> 
     </div> 
    ); 
} 

So, wie ich am Anfang gesagt, die URL Änderungen an dem richtigen Weg, aber Die Seite wird die SaleSelectInvoices-Komponente nicht wiedergegeben. Ich sehe weiterhin die Sale-Komponente. Die Browserkonsole enthält ebenfalls keine Fehler.

+0

Können Sie die Komponenten protokollieren, die an diese Funktion übergeben werden? https://github.com/ReactTraining/react-router/blob/v3.0.0/modules/createTransitionManager.js#L72 Es kann auch hilfreich sein, wenn Sie die Renderfunktion Ihrer Komponente '' einfügen. –

+0

Aktualisiert mit der Sale.js render ... nicht sicher, wie diese Komponenten zu protokollieren ... Entschuldigung für die Neuigkeit Antwort:/ –

+0

Sie müssten in den Ordner "/ node_modules/react-router" gehen und die richtige Datei ändern . Das ist jedoch nicht wichtig, weil ich glaube, dass das Problem nur darin besteht, wie Sie rendering, nicht ein Problem mit der Route. (Siehe meine Antwort unten). –

Antwort

1

Der select-invoices Pfad ist ein Kind Weg von authorize-card, so dass die <SaleSelectInvoices> Komponente wird als Kind der <Sale> Komponente gerendert. Dies bedeutet, dass Sie this.props.children in die Rendermethode <Sale> der Komponente einfügen müssen.

Wenn Sie nicht wollen, dies zu tun, aber Sie wollen die select-invoices Route ein Kind authorize-card zu sein, können Sie <Sale> als <IndexRoute> erklären und eine Halterkomponente für die beiden verwenden ..

<Route path="authorize-card" component={SaleHolder}> 
    <IndexRoute component={Sale} /> 
    <Route path="select-invoices" component={SaleSelectInvoices}></Route> 
</Route> 

Die <SaleHolder> wird nur ihre Kinder Requisite zurückgeben.

const SaleHolder = (props) => { 
    return props.children; 
} 
+0

Ich ging den IndexRoute Weg. Habe es herausgefunden. Danke Paul. –

Verwandte Themen