我有一个 function 组件，不知道如何导入路由器，reactjs

Question

I have a Slider component function, export default Slider. In App.js I have

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>
);
}

How would I go about having the component function run when the '/' Homepage loads?

This is the component function. Noob and having trouble finding the correct terms to search a proper documentation.

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;

Answer 1

You can use this Slider component directly into the Home component because I'm assuming that this #slides element is on Home.