当组件最初未呈现时，如何通过React-Router 4中的URL访问组件？

Question

希望标题有意义。

我的React应用程序登录页面由三个组件组成 - 标题，主要内容区域，然后是底部的产品列表。单击产品时，然后在全屏视图中呈现类别列表作为产品的子项，并将产品名称附加到URL。

由于我使用的产品数量，我最初只展示切片阵列中的六种产品。通过单击按钮显示下一个或前六个产品，这些按钮通过更改状态来更改切片值。当我访问最初的六个产品之一的URL，即myurl.com/prod1时，它成功路由。但是，如果我尝试访问第二批产品之一的网址，例如myurl.com/prod7，那么它将不会路由并离开我的目标网页。

处理这种结构的正确方法是什么？

非常感谢。

Answer 1

您可以将先前路由的路径名与componentDidUpdate方法上的活动路由路径名进行比较，并在URL中有任何更改时获取数据。

例如;

componentDidUpdate(prevProps) {
    if(prevProps.location.pathname !== this.props.location.pathname){
        fetchData()
    }
}

P.S：你应该使用react -outer-dom软件包中的rotout来导入路由器道具。