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.
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. –
Aktualisiert mit der Sale.js render ... nicht sicher, wie diese Komponenten zu protokollieren ... Entschuldigung für die Neuigkeit Antwort:/ –
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). –