React Router — популярная библиотека для управления навигацией в приложениях React. С выпуском React Router v6 произошли некоторые изменения в управлении навигацией по сравнению с предыдущими версиями. В этой статье мы рассмотрим альтернативные методы навигации в компонентах класса React Router v6, уделяя особое внимание альтернативам методу history.goBack().
- Использование хука
useNavigate:
React Router v6 представил хукuseNavigate, который обеспечивает возможность программной навигации, не полагаясь наhistoryобъект. Вот пример того, как использовать его в компоненте класса:
import { useNavigate } from 'react-router-dom';
class MyComponent extends React.Component {
navigateToHome = () => {
const navigate = useNavigate();
navigate('/');
}
render() {
return (
<button onClick={this.navigateToHome}>Go to Home</button>
);
}
}
- Использование компонента
Link.
Другой подход — использовать компонентLink, предоставляемый React Router v6. Он позволяет создавать кликабельные ссылки, которые запускают навигацию. Вот пример:
import { Link } from 'react-router-dom';
class MyComponent extends React.Component {
render() {
return (
<Link to="/home">Go to Home</Link>
);
}
}
- Использование хука
useHistory:
Хотяhistory.goBack()не рекомендуется использовать в компонентах класса React Router v6, вы все равно можете использоватьuseHistoryперехватчик для доступа к объектуhistoryи навигации с использованием его методов. Вот пример:
import { useHistory } from 'react-router-dom';
class MyComponent extends React.Component {
navigateToHome = () => {
const history = useHistory();
history.push('/home');
}
render() {
return (
<button onClick={this.navigateToHome}>Go to Home</button>
);
}
}
React Router v6 представляет альтернативные методы навигации по компонентам классов, отходя от подхода history.goBack(). Используя крючок useNavigate, компонент Linkили крючок useHistory, вы можете добиться более эффективной и надежной программной навигации.п>