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 - обычный компонент с текстом

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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