親コンポーネント上に子コンポーネントをレンダリングする

Question

コンポーネントを別のルートでレンダリングする必要がありますが、このコンポーネントはすべてのページをカバーしてはいけません。例えば、私はstackoverflowのリストからいくつかの質問をクリック、と私は右から左モーダルからアニメーションを受信するよりも、私はルートを変更する必要があるにも

は

（私はV4を使用しています）ルータに反応

export default (
    <Switch> 
    <App> 
     <Route exact={true} path="/" component={App} /> 
     <Route exact={true} path="/product/:id" component={Product}/> 
    </App> 
    </Switch> 
); 

私の製品容器は

export default function productContainer(ChildComponent) { 
    class ProductContainer extends Component { 
    render =() => { 
     return <ChildComponent/> 
    } 
    } 

    return ProductContainer; 
} 

そして、私の製品コンポーネントのように見えます

class Product extends Component { 
    render =() => { 
    return ("") 
    } 
} 

export default productContainer(Product); 

私は上述の状況、私のページが完全にrerendredエミュレートし、私は私のアプリのコンポーネントのページが表示されない

は、私はこの問題を解決することができますどのように任意のアイデアを持っていますか？

Answer 1

人々が反応し、ルータを再レンダリングすることなく、（今の議論を見つけることができません）で前にルートとしてモーダルをレンダリングする方法を求めています。本質的に反応ルータではこれは不可能です。各ルートの変更により、再レンダリングが発生します。それは、あなたのルートを入れ子にすることで、あなたが望むことができると言いました。

各コンポーネントはルートを返すことができるので、ルートをレンダリングする場所を選択することができます。例えば

、<App />インサイド

export default (
    <Switch> 
    <App> 
     <Route path="/" component={App} /> 
    </App> 
    </Switch> 
); 

-

render() { 
    return (
     <Something> 
      <PageHeader /> 
      <Switch> 
       <Route path="/product/:id" component={Product}/> 
      </Switch> 
     </Something> 
    ); 
} 

だから、あなたが見ることができるあなたがAppコンポーネント内あなたのルートを追加した場合、彼らはすべての一般的なページレイアウトを共有することができます。

覚えておいてください：どのコンポーネントも複数のルートを返すことができます。スイッチは一致する最初のルートのみをレンダリングします。

も忘れないでください：スイッチ内部のルートが直接の子でなければならない、あなたはSwitch -> App -> Routeを持つことができない、それは常にSwitch -> Route

Answer 2

使用のような直接の子は、プロパティの代わりのルートでコンポーネントをレンダリングしなければなりません。

<Route exact={true} path="/" render={() => (
    <div> 
     <App /> 
     <Route exact={true} path="/product/:id" component={Product}/> 
    </div> 
)} />