反応し、ルータをhashHistoryプッシュは私が子供のルートのコンポーネントをロードするためにアプリを反応取得のトラブルを抱えているだけ

Question

URLを変更します。私はthis.context.router.push（「/ URL」）を行うときに、URLは変わりますが、そのルートのためにロードするために命名されたコンポーネントがロードされていません。私はこれが別のコンポーネントで動作しているが、これは動作しません。私はそれが異なっている見ることができる唯一のことは動作しないものが動作するものよりもルートツリー内の1つのレベルより深いであるということです。
私は私の手掛かりを与える何かを見つけることができるかどうかを確認するためにSO同様にすべての場所で反応し、ルータを文書化し、さまざまなチュートリアルを見てきたが、空が出ています。 関連するコードは次のとおりです。

client.js - （ほとんどの人にとってapp.js）

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

。私は、コンテキストの参照を行う

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

...

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

だから、私が最初に言ったように、適切なルートへのURLの変更はなく、ページはSaleSelectInvoicesコンポーネントをレンダリングしません。まだSalesコンポーネントが表示されます。ブラウザコンソールにもエラーが表示されません。

Answer 1

select-invoices経路はauthorize-cardの子経路であるので、<SaleSelectInvoices>成分は<Sale>コンポーネントの子としてレンダリングされます。これは、あなたの<Sale>コンポーネントのrenderメソッドでthis.props.childrenを含める必要がありますことを意味します。

あなたはこれを行うにはしたくないが、あなたは、あなたが... <IndexRoute>として<Sale>を宣言し、2のためのホルダー部品を使用することができますauthorize-cardの子であることをselect-invoicesルートをしたい場合は

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

<SaleHolder>は、その子propを返します。

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