时间戳

首页 > 解决方案 > 当组件最初未呈现时，如何通过 React-Router 4 中的 URL 访问组件？

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

问题描述

希望标题有意义。

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

由于我使用的产品数量众多，我最初只显示切片数组中的六个产品。通过单击按钮显示下一个或前六个产品，通过更改状态来更改切片值。当我访问最初六个产品之一的 URL 时，即 myurl.com/prod1，它成功路由。但是，如果我尝试访问第二批产品之一的 URL，比如 myurl.com/prod7，那么它不会路由并将我留在登录页面。

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

非常感谢。

标签： reactjsreact-router

解决方案

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

例如;

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

PS：您应该从 react-router-dom 包中导入 withRouter hoc 以访问路由器道具。

推荐阅读