Как можно реализовать задержку перед переходом на другой компонент : у меня есть кнопка ( ссылка - react-router-dom ), при нажатие на которую у меня запускается анимация и мне нужно сделать задержку, чтобы эта анимация успела выполнится и после этого был отрисован другой компонент.
1 ответ
Я нашел решение, можно использовать 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 - обычный компонент с текстом