Tengo una función de componente Slider, exportar Slider predeterminado. En App.js tengo

 function App() { return ( <Router> <Routes> <Route exact path='/' element={<Home />} /> <Route path='/about' element={<About/>} /> <Route path='/contact' element={<Contact/>} /> <Route path='/blogs' element={<Blogs/>} /> <Route path='/sign-up' element={<SignUp/>} /> </Routes> </Router> ); }

¿Cómo haría para que la función del componente se ejecute cuando se carga la página de inicio '/'?

Esta es la función componente. Noob y tiene problemas para encontrar los términos correctos para buscar una documentación adecuada.

 function Slider() { const messages = [ "Around 920,000 cats and dogs were euthanized in animal shelters in 2020...", "Approximately 3.1 million dogs and 3.2 million cats enter animal shelters each year...", "Most pets are surrendered for adoption due to no fault of their own...", "If you'd like to take a leap towards adopting a pet, click on the green paw!" ]; let i = 0; const slides = document.querySelector('#slides'); function slide() { slides.innerHTML = messages[i]; slides.style.opacity = 1; setTimeout(next, 4000); } function next() { i++; if (i > messages.length - 1) { i = 0; } else if (i === messages[3]) { setTimeout(10000); } slides.style.opacity = 0; setTimeout(slide, 2000); } return ( Slider() ); } export default Slider;