Question

我有以下ProductThumbnail组件，当我点击链接时，它会更新URL并更改路由以重定向到ProductDesc组件。它正确生成URL / productDescRedux / itemId。

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

这里用于完成使用connect（）以及Main组件

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

Answer 1

Main组件上的语法问题，它是所有组件的父组件。我需要

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

而不是

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

Ref issue

Url更改时路由不呈现组件

1 个答案: