Есть три основных способа для программной навигации в React Router v4, каждый со своим уровнем рекомендуемости и сложностью реализации.
withRouter() — это компонент высшего порядка, который внедряет объект history как пропс, давая доступ к методам навигации без использования контекста.
import { withRouter } from 'react-router-dom'
const Button = withRouter(({ history }) => (
<button type='button' onClick={() => {
history.push('/new-location')
}}>
{'Click Me!'}
</button>
))
Основные преимущества:
Компонент <Route> передаёт пропсы роутера (включая history) через паттерн render props, позволяя навигировать внутри определения маршрута.
import { Route } from 'react-router-dom'
const Button = () => (
<Route render={({ history }) => (
<button type='button' onClick={() => {
history.push('/new-location')
}}>
{'Click Me!'}
</button>
)} />
)
Основные преимущества:
Прямой доступ к контексту считается нестабильным API и должен избегаться в современных приложениях.
const Button = (props, context) => (
<button type='button' onClick={() => {
context.history.push('/new-location')
}}>
{'Click Me!'}
</button>
)
Используй withRouter() в большинстве случаев. В современных приложениях стоит смотреть в сторону React Router v6+ с хуком useNavigate() для функциональных компонентов — это даёт более элегантное решение.
HOC withRouter() — это рекомендуемый подход для реализации программной навигации как в class, так и в функциональных компонентах в React Router v4.
Новый — ещё не проверен сообществом
Вы