如何确保App.js代码在所有路由组件执行前运行？

问题原因 #

React类组件的生命周期规则是：父组件的componentDidMount钩子会在所有子组件的componentDidMount执行完毕后才触发，这就是为什么你现在看到路由组件的日志先输出的原因。

修复步骤 #

1. 先修正代码中的语法错误

这些错误会导致组件无法正常渲染，必须先解决：

• App.js的render方法缺少return语句，必须返回JSX结构；
• 路由的element属性语法错误，应改为<Route1 />、<Route2 />的正确组件格式；
• Route2.js的导出语句错误，应为export default Route2；
• 所有Console.log改为小写的console.log（JS是大小写敏感的）；
• 路由组件的render方法不能返回空的return()，至少返回null。

2. 调整App的日志输出时机

要让App的日志先执行，需要把日志移到比子组件挂载更早的阶段：

• 方案一：将日志放在App组件的constructor中（推荐），constructor是组件初始化时执行的钩子，早于任何子组件的挂载流程；
• 方案二：将App改为函数组件，把日志放在组件顶层代码中，会在渲染子组件前执行。

修正后的代码示例 #

App.js（方案一）

import React from 'react';
import { Route, Routes, BrowserRouter } from 'react-router-dom';
import './App.css';

import Route1 from './components/Route1';
import Route2 from './components/Route2';

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log('This is from App.js'); // 移到constructor中
  }

  componentDidMount() {
    // 这里可以保留挂载后需要执行的其他逻辑
  }

  render() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/route1" element={<Route1 />} />
          <Route path="/route2" element={<Route2 />} />
        </Routes>
      </BrowserRouter>
    );
  }
}
export default App;

Route1.js

import React, { Component, createRef } from 'react'

class Route1 extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("This is from Route1");
    // some code
  }

  render() {
    return null;
  }
}
export default Route1;

Route2.js

import React, { Component, createRef } from 'react'

class Route2 extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("This is from Route2");
    // some code
  }

  render() {
    return null;
  }
}
export default Route2;

效果验证 #

访问localhost:3000/route1时，控制台输出顺序会变为：

This is from App.js
This is from Route1

内容的提问来源于stack exchange，提问作者Amol Mohite