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を呼び出さない理由がわかりません。任意の洞察?
が必要?それは 'ProductsGrid'の子ですか? – Deadfish
はい私はProductsGridで子として呼び出す – Nicc
あなたにも 'App'コンポーネントコードを含めることができますか?または要点またはjsbinでコードを提供してください。他の人があなたの問題をより良く理解するのに役立ちます – Deadfish