路由参数更改时组件将不会重新加载新数据

问题描述 投票:0回答:1

我注意到,当我在/ users /:id1链接上尝试进入新的用户个人资料页面/ users /:id2时,它不会重新加载我要访问的新用户ID的数据到,但是如果我来自其他页面(例如/ forums或/ search),它将加载正常

[我已经尝试过componentWillReceiveProps,但是我不确定我是否正确实施了该方法,并且也不知道现在是否可以安全使用b / c,现在可能不建议使用它?

我也尝试过用withRouter包裹我的UserProfile,但似乎变得更糟,因为刷新页面时不会加载任何数据

App.js

<BrowserRouter onUpdate={() => window.scrollTo(0, 0)} >
    <div>
        <Switch>
            <Route exact path="/search" component={Search}/>
            <Route exact path="/forum" component={Forum}/>
            <Route exact path="/user/:id" component={UserProfile} currentUserId={this.state.currentUserId}/>
        </Switch>
    </div>
</BrowserRouter>

我的链接看起来如何

<Link className="pt-button pt-minimal" to={"/user/"+this.props.currentUserId}>My Profile</Link>

我对componentWillReceiveProps的尝试

if (nextProps.match.params.id !== this.props.match.params.id) {
    this.setState({

        userId: nextProps.match.params.id,

    })
    this.componentWillMount();
}

预期:单击指向另一个用户配置文件的链接时,它将使用该新用户配置文件的数据重定向到新用户配置文件

实际:URL发生更改,但没有重新加载数据。

我注意到,当我在/ users /:id1链接上尝试进入新的用户个人资料页面/ users /:id2时,它不会重新加载我要访问的新用户ID的数据到,但是如果我来自...

reactjs react-router react-router-dom
1个回答
2
投票

我认为您已经很接近了,但是错误理解的生命周期方法以及何时/如何调用它们的混合导致了一些问题。

© www.soinside.com 2019 - 2024. All rights reserved.