Url更改时路由不呈现组件

问题描述：

我有以下ProductThumbnail组件，当我点击链接时，它更新URL并更改路径以重定向到ProductDesc组件。它会正确生成URL/productDescRedux/itemId。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;

然而，尽管URL变化，它不会调用组件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> 
) 
} 
})

这里完成它使用连接（在App组件）以及主要成分

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。任何见解？

其中'ProductThumbnail'在航线层次声明？它是'ProductsGrid'的孩子吗？ – Deadfish

是的，我在ProductsGrid中调用它作为孩子 – Nicc

你是否也可以包含'App'组件代码？或者以精华或者jsbin的形式提供你的代码。它会帮助他人更好地理解你的问题 – Deadfish

答

作为所有父组件的主组件上的语法问题。我需要

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

，而不是

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

Ref issue

Url更改时路由不呈现组件

相关推荐