2016-08-19 41 views
1

次のProductThumbnailコンポーネントがあります。リンクをクリックするとURLが更新され、ProductDescコンポーネントにリダイレクトされるルートが変更されます。 URL/productDescRedux/itemIdが正しく生成されます。 URLの変更にもかかわらず、しかしURLが変更されたときにレンダリングコンポーネントをルーティングしない

const ProductThumbnail = (props) => { 
const itemId = props.product 
return(
    <div> 
    <Link to={`/productDescRedux/${itemId.id}`}> 
    <div> 
     <h1>{props.product.headline}</h1> 
     <img src={props.product.images[0].imagesUrls.entry[1].url} alt="Thumbnail small pic"/> 
     <p></p> 
    </div> 
    </Link> 
    </div> 
) 
} 

ProductThumbnail.propTypes = { 
product: React.PropTypes.object 
}; 

export default ProductThumbnail; 

それはコンポーネントProductDescを呼び出さないと私は、コンポーネントProductDescを表示するには、ページをリロードする必要があります。ルートとは別のファイルで構成完了のためProductDesc

const Routes = function(){ 
return(
    <Provider store={store}> 
    <Router history={ hashHistory }> 
    <Route path="/" component={ Container }> 
    <IndexRoute component={ Home } /> 
    <Route path="/productredux" component={ App } > 
     <IndexRoute component={ ProductsGrid }/> 
     <Route path="/productDescRedux/:id" component={ ProductDesc } /> 
    </Route> 
    <Route path="*" component={ NotFound } /> 
    </Route> 
    </Router> 
</Provider> 
) 
} 

export default Routes; 

const ProductDesc =()=>({ 
render(){ 
    return (
    <div> 
    <h1>hello</h1> 
    <p>Yeah</p> 
    </div> 
) 
} 
}) 

そして、ここで(に接続使用するアプリケーション・コンポーネント)だけでなく、メインコンポーネント

function mapStateToProps(state){ 
    return { 
    products:state.products 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators(actionCreators,dispatch); 
} 

const App = connect(mapStateToProps,mapDispatchToProps)(Main); 

export default App; 

//

const Main = (props) => ({ 
    render(){ 
     return (
     <div> 
      {React.cloneElement(props.children, this.props)} 
     </div> 
    ) 
    } 
}) 

export default Main; 
の下に

URLを変更するとルーティングがコンポーネントProductDescを呼び出さない理由がわかりません。任意の洞察?

+0

が必要?それは 'ProductsGrid'の子ですか? – Deadfish

+0

はい私はProductsGridで子として呼び出す – Nicc

+0

あなたにも 'App'コンポーネントコードを含めることができますか?または要点またはjsbinでコードを提供してください。他の人があなたの問題をより良く理解するのに役立ちます – Deadfish

答えて

0

すべての親であるメインコンポーネントの構文の問題。私は

{React.cloneElement(this.props.children, this.props)} 

代わりの

{React.cloneElement(props.children, this.props)} 

`ProductThumbnail`がルート階層で宣言されているRef issue

関連する問題