1

Как можно реализовать задержку перед переходом на другой компонент : у меня есть кнопка ( ссылка - react-router-dom ), при нажатие на которую у меня запускается анимация и мне нужно сделать задержку, чтобы эта анимация успела выполнится и после этого был отрисован другой компонент.

1 ответ 1

0

Я нашел решение, можно использовать useNavigation ( react-router-dom v6 )

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById('root')
)


App.js

import React from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './components/Home'
import Contact from './components/Contact'

function App() {
    return (
        <>
            <header>
                <Link to='/'>Home</Link>
                <Link to='/contact'>Contact</Link>
            </header>
            <div>
                <h1>Get started with React-Router 6</h1>
            </div>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/contact' element={<Contact />} />
            </Routes>
        </>
    )
}

export default App

Home.js

import React, { useState } from 'react'
import { useNavigate } from 'react-router'

const Home = () => {
    const [state, setSate] = useState(false)

    const navigate = useNavigate()

    if (state) {
        setTimeout(() => {
            navigate('/contact')
        }, 1000)
    }

    const redirect = () => {
        setSate(!state)
    }

    return <button onClick={redirect}>Redirect</button>
}

export default Home

Contact.js - обычный компонент с текстом

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.