Necesito que el método componentDidMount se active cuando el enrutador monte un componente para que se pueda iniciar un tiempo de espera. Este tiempo de espera finalmente establece el estado para que no se pueda inicializar en ningún ciclo de vida de procesamiento o en el constructor. Intenté cambiar el component={Home} a render={<Home>} , pero luego aparece el error render is not a function . Realmente no estoy seguro de por qué sucede esto, ¡así que cualquier ayuda sería muy apreciada!

Método de procesamiento de App.js:

 render() { return ( <BrowserRouter> <Navbar /> <Container> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> </Switch> </Container> </BrowserRouter> ); }

Inicio.js:

 const Home = (props) => { const images = [ /* Stuff */ ]; return ( <Stack gap={4}> <div> <Card> <Card.Header> <ImageRotator images={images} /> </Card.Header> <Card.Body> <Card.Title>// A Title</Card.Title> <Card.Text> // Text </Card.Text> </Card.Body> </Card> </div> </Stack> ); }

ImageRotator.js:

 class ImageRotator extends Component { constructor(props) { super(props); this.state = { firstImageIndex: 0, renderImages: false, imagesShowing: [], } } componentDidMount() { const imagesShowing = this.calculateImagesToShow(this.state.firstImageIndex); this.setState({ imagesShowing: imagesShowing }); window.addEventListener('resize', () => { const imagesToShow = this.calculateImagesToShow(this.state.firstImageIndex); const imageTimeout = setTimeout(() => this.incrementImageIndex(), 5000); this.setState({ imagesShowing: imagesToShow, imageTimeout: imageTimeout }); }); } calculateImagesToShow(firstImageIndex) { // Returns the images to render on screen } resetImageInterval() { clearTimeout(this.state.imageInterval); this.setState({ imageInterval: setTimeout(() => this.incrementImageIndex(), 5000) }); } incrementImageIndex() { // Increments the state's first image index } decrementImageIndex() { // Decrements the state's first image index } render() { // Renders the calculated images on the screen including two buttons // which when clicked on call the increment and decrement image index functions } }