我目前在 http://example.com/parentdir/module/2/
该URL实际上按照以下路由指示加载Module.js类：
<Route exact path={"/parentdir/module/:id"} component={Module} />
它包含在index.js文件中定义的<BrowserRouter>和<Switch>元素中。
Module类具有constructor和componentWillMount方法。这些设置了记录2的初始详细信息和装入信息。到目前为止一切正常。
现在，我的问题是在Module.js的孙子组件中，我使用以下Redirect重定向到另一个页面，例如第3页：
return (
<Redirect to="/parentdir/module/3/" />
)
构造函数或componentWillMount无法运行，因此记录＃3无法正确加载。这是因为从加载记录2开始就已经将该组件加载到内存中了吗？重新加载Module.js以便正确加载记录＃3的最佳方法是什么？我是否必须以某种方式重新初始化类？还是我必须以某种方式将孙子组件中的数据传递回模块类？后一种方法似乎很乏味。
只是为了澄清一下，如果我直接转到地址栏中的http://example.com/parentdir/module/3，则一切正常，但是如果我在ReactJS环境中重定向到该相同地址，它将无法正常工作。
更新资料
到目前为止，我的问题有两个答案。一种解决方案建议使用componentWillReceiveProps。另一种解决方案建议将一种方法作为道具传递给孩子，然后传递给孙子。使用这些方法是否各有利弊，还是只是偏爱？
将id被作为一个传递prop的形式this.props.params.id，所以你应该使用componentWillReceiveProps它运行每次生命周期方法，props而这一点正是你的情况发生了变化。
componentWillMount当您从导航/parentdir/module/2到/parentdir/module/3该组件时，该方法将不会运行mounted。仅当您从其他组件导航时（例如，直接进入），它才会运行。
在您的Module组件中添加此生命周期方法
componentWillReceiveProps(nextProps){
if(nextProps.params.id != this.props.params.id){
//load information etc (whatever you are doing in componentWillMount)
}
}
发生的事情是，当它收到较新的一组参数时props，将比较参数id是否已更改（所有路由参数都存在于中的params对象中props），并在看到有更改时执行逻辑。比较并不是真正必要的，您可以按原样添加方法中的逻辑，componentWillReceiveProps但是这样做效率低下，因为每次props对象更改时都会调用它（可能根本不是id参数）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句