Javascript 路由中的渲染组件不会激发其componentDidMount_Javascript_Reactjs_React Router_React Router V4

Javascript 路由中的渲染组件不会激发其componentDidMount

javascript reactjs

Javascript 路由中的渲染组件不会激发其componentDidMount,javascript,reactjs,react-router,react-router-v4,Javascript,Reactjs,React Router,React Router V4,不要费心阅读问题，问题的结尾有一个解决方案我有以下路由器，使用反应路由器4 return ( <Router> <Page> <Route exact path="/" component={HomePage} /> <Route path="/courses/:courseName" component={CoursePage} /> </Page> </Router> )

不要费心阅读问题，问题的结尾有一个解决方案

我有以下路由器，使用反应路由器4

return (
  <Router>
    <Page>
      <Route exact path="/" component={HomePage} />
      <Route path="/courses/:courseName" component={CoursePage} />
    </Page>
  </Router>
);

站点页眉

、

站点页脚

、

主页

和

课程页面

都是纯粹的表现组件；他们把道具拿进去，然后吐出来。未连接到redux存储或任何东西<代码>主页和

课程页

被定义为类

在

主页

和

课程页面

中，我需要使用

组件didmount

挂钩，以便与DOM交互

现在发生了以下奇怪的事情：

步骤1：我从

url重新加载应用程序

执行
```
页面
```
的渲染功能
执行
```
主页
```
的构造函数
执行
```
主页的组件didmount
```


步骤2：我导航到/courses/：courseName


执行页面
的渲染功能
执行主页
的组件将卸载
执行CoursePage
的构造函数

注意CoursePage
的组件didmount
是如何不启动的。这很重要，因为我需要组件didmount
挂钩
步骤3：我从/courses/：courseName


执行页面
的渲染功能
执行主页
的构造函数
执行CoursePage
的组件将卸载

执行主页的组件didmount


步骤4：我再次从/
导航回/courses/：courseName


执行页面
的渲染功能
主页的组件将卸载
，执行

执行CoursePage的构造函数

执行CoursePage
的componentDidMount

注释

如果在步骤1中，我从/courses/:courseName
而不是/
重新加载，而不是将主页
放在中，则会发生完全相同的情况，反之亦然

我总是丢失步骤2（第一次重定向）的componentDidMount
。之后，所有componentDidMount
功能都会按预期正常启动
注意第3步和第4步中的粗体部分是如何以相反的顺序触发的。我不确定这是否有任何意义

问题

为什么在第2步中，路由的组件
没有启动其组件didmount
方法？我是否遗漏了一些非常明显的东西，是我不知道的一些神秘知识，还是我遇到了错误
额外好处：当我们从/
导航到/courses/:coursName
时，当组件将卸载CoursePage
的组件之前，主页
的构造器函数启动有什么用



使用组件（而不是下面的渲染）时，路由器使用
React.createElement从给定的
组成部分这意味着如果提供内联函数，则
在每次渲染时创建新组件。这导致了现有的
卸下组件并安装新组件，而不仅仅是
更新现有组件。
这使得我的问题变得更加没有意义
我找到的解决方法
在我的页面
组件中，如果我只是像这样移动子项的顺序

function Page(props) {
  const { children } = props;
  return (
    <div className="page">
      {children} // MOVED FIRST
      <SiteHeader />
      <SiteFooter />
    </div>
  );
}

和MockPage.jsx
是以下组件
import React from 'react';
class Stub extends React.Component {
  constructor(props) {
    super(props);
    debugger;
  }
  componentDidMount() { debugger; }
  componentWillUnmount() { debugger; }
  render() { return <div style={{ margin: '100px 0' }}><span>Hello</span></div>; }
}
export default Stub;

function MockPage(props) {
  const { children } = props;
  debugger;
  return (
    <div className="page">
      <div>Hi</div> //Instead of SiteHeader
      {children}
      <div>Hi</div> //Instead of SiteFooter
    </div>
  );
}

（B）
返回(
);

最终更新：
发现问题了
问题显然是react插件perf
，我在导入到SiteHeader
组件的按钮中使用了该插件。Perf工具在发生的第一个重定向上抛出了一个错误，这将搞乱随后组件的生命周期挂钩。这就解释了这样一个事实：当我将子项的位置移动到站点标题之前时，一切都正常了。感谢所有费心阅读我的废话的人，并为浪费您的时间而道歉。
使用React route 4，您可以像这样撰写页面。与路线匹配的每条路线都将显示在视图中。反应路线4不再需要道具儿童
这是代码为我工作。
如果我转到“/”，则页眉、主页和页脚将呈现，包括DidMount。
如果我转到“/courses/1”，则会呈现页眉、主页、课程和页脚，包括DidMount
从'react Router dom'导入{BrowserRouter as Router，Route}；
从“React”导入React，{PropTypes}；
从“./components/App/SiteFooter”导入SiteFooter
从“./components/App/SiteHeader”导入SiteHeader
从“./components/App/CoursePage”导入CoursePage
从“./components/App/HomePage”导入主页
导出默认类路由扩展React.Component{
render（）{
返回(
);
}
}
Page
组件仍然需要呈现其子级，因此需要children
。无论如何，按照您的建议进行操作仍然会丢失第一个组件
function MockPage(props) {
  const { children } = props;
  debugger;
  return (
    <div className="page">
      <div>Hi</div> //Instead of SiteHeader
      {children}
      <div>Hi</div> //Instead of SiteFooter
    </div>
  );
}

return (
  <Router>
    <div>
      <Route exact path="/" component={Stub} />
      <Route path="/courses/:courseName" component={Stub} />
    </div>
  </Router>
);

return (
  <Router>
    <MockPage>
      <Route exact path="/" component={Stub} />
      <Route path="/courses/:courseName" component={Stub} />
    </MockPage>
  </Router>
);