Question

我在路线中遇到了一个问题，即如何在多个导航链接中呈现相同的组件。

我有2个这样的导航链接。当我单击编辑产品时，该组件将成功呈现详细信息。之后，我单击添加产品，然后组件不再呈现，因为组件已在编辑产品链接上呈现。

我使用相同的组件进行添加和编辑。

任何人都可以告诉我如何在下次单击时重新呈现该组件。

预先感谢

          <Route
            path="/addproduct"
            render={() => {
              return userData.is_superuser === true ? (
                <Product />
              ) : (
                <Redirect to="/dashboard" />
              );
            }}
          />
        <Route path="/editproduct/:id" component={Product} />

Answer 1

尝试如下使用渲染属性

<Route path="/editproduct/:id" render={() => <Product/> } />

您是否使用Switch组件包装了路线？

仅提供一个额外的信息，您应该看一下react lazy/suspense，它用于代码拆分，对于减少SPA的加载时间很有用。

Answer 2

我找到了解决此问题的方法。

您需要在组件中使用 componentWillReceiveProps 函数。

第一次通过调用网址www.example.com/content1/ componentDidMount（）运行来单击链接。

现在，当您单击另一个链接时，说www.example.com/content2/，将调用相同的组件，但是这次prop发生了变化，您可以在componentWillReceiveProps（nextProps）下访问此新prop，可用于调用API或将状态设置为空白并获取新数据。

componentWillReceiveProps(nextProps){
     //call your API and update state with new props
}

组件的多个导航链接使用reactjs渲染每次点击

2 个答案: