如何总是在任何路由之前执行app.js代码

Question

我正在开发一个简单的路由应用程序。我定义了如下2条路由:

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);
}
componentDidMount() {
console.log('This is from App.js')
}
render() {
<BrowserRouter>
<Routes>
<Route path="/route1" element={[<Route1]}/>
<Route path="/route2" element={[<Route2]}/>
</Routes>
</BrowserRouter>
}
}
export default App;

路线1

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()
}
export default Route1

路线2

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()
}
export default Route1

我想先执行用app.js编写的代码，甚至在路由之前。

当我在localhost:3000/route1上时，我可以控制台输出如下:

This is from Route1
This is from App.js

但是我想在任何路由之前执行app.js代码，所以预期的输出是:

This is from App.js
This is from Route1

Answer 1

在constructor中编写代码将完成您的工作。它应该看起来像这样:

constructor(props) {
super(props);
console.log('This is from App.js')
}

Answer 2

App组件需要完全挂载/渲染它的子reactretree，然后才考虑自己被挂载/渲染。如果你想在渲染子渲染之前运行一些逻辑，那么你可能需要添加一些"初始渲染"。状态给父组件，并在父组件挂载并完成逻辑后，有条件地呈现子组件。

的例子:

class App extends React.Component {
state = {
loaded: false,
}
componentDidMount() {
console.log('This is from App.js');
this.setState({ loaded: true });
}
render() {
const { loaded } = this.state;
return (
<BrowserRouter>
{loaded && (
<Routes>
<Route path="/route1" element={<Route1 />} />
<Route path="/route2" element={<Route2 />} />
</Routes>
)}
</BrowserRouter>
);
}
}