Question

我正在研究ReactJS项目。我在主页“索引组件”中有以下三个组件，

导航- 精选- 页脚

我的Nav组件具有指向2个不同组件的2个链接。我的开关如下，

  <Switch>
      <Route path="/home" component={props => <Index {...props} />} />
      <Route path="/register" component={Register} />
      <Route path="/login" component={Login} />
      <Route path="/cart" component={Cart} />
      <Redirect from="/" to="home" />
  </Switch>

我的索引部分也如下，

   <React.Fragment>
       <Search />
       <Nav history={history} />
    {this.homePageComponents()}
       <Route
      path="/home/bedding"
      component={props => (
        <Bedding beddingProducts={this.beddingProducts()} {...props} />
      )}
    />
       <Route
      path="/home/bath"
      component={props => (
        <Bath bathProducts={this.bathProducts()} {...props} />
      )}
    />
       <Route path="/home/search" component={Search} />
  </React.Fragment>

我正在尝试将Nav组件同时呈现给Bath和Beddding产品，但是无论何时导入并在其中使用它，都会给我一个错误，提示this.props.history.replace未定义。这是项目的链接。 https://github.com/MaxOffline/beetle

Answer 1

我认为您可以使用react-router提供的“ withRouter”包装器组件包装Nav组件来解决您的问题。

https://reacttraining.com/react-router/web/api/withRouter

Answer 2

如果您在nav.jsx的render方法中console.log(this.props)，您会看到它包含一个历史记录对象，但是该对象上没有替换方法。

您可能正在寻找this.props.history.push方法？

Answer 3

我找到了一种解决问题的简单方法。我需要做的就是有条件地将组件呈现到主页，因此我只是将以下辅助方法添加到“索引”组件中。

homePageComponents = () => {
const featuredProducts = this.state.products.filter(
  product => product.featured === true
);
if (this.props.history.location.pathname === "/home") {
  return <Featured featuredProducts={featuredProducts} />;
}

};

如何在React中将一个组件渲染为2个不同的组件？

3 个答案: