我有一個 function 組件，不知道如何導入路由器，reactjs

Question

我有一個 Slider 組件 function，默認導出 Slider。在 App.js 中我有

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

我 go 如何讓組件 function 在“/”主頁加載時運行？

這是組件 function。Noob 並且無法找到正確的術語來搜索正確的文檔。

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

您可以將這個 Slider 組件直接用於 Home 組件，因為我假設這個#slides元素在 Home 上。