Чтобы перенаправить обратно на предыдущую страницу по клику с помощью React Router, вы можете использовать несколько методов. Вот некоторые из часто используемых подходов:
- API истории: вы можете использовать объект
history, предоставленный React Router, чтобы вернуться на предыдущую страницу. Этого можно добиться с помощью методаgoBack(). Вот пример:
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleGoBack = () => {
history.goBack();
};
return (
<button onClick={handleGoBack}>Go Back</button>
);
}
- Route Props: если вы визуализируете свой компонент как прямой дочерний элемент компонента
Route, вы можете получить доступ к объектуhistoryчерезpropsи используйте методgoBack(), как показано ниже:
function MyComponent(props) {
const handleGoBack = () => {
props.history.goBack();
};
return (
<button onClick={handleGoBack}>Go Back</button>
);
}
- withRouter HOC: Если ваш компонент не отображается напрямую компонентом
Route, вы можете использовать компонент высшего порядкаwithRouter(HOC) для внедрения - withRouter. code>historyв реквизиты вашего компонента. Вот пример:
import { withRouter } from 'react-router-dom';
function MyComponent(props) {
const handleGoBack = () => {
props.history.goBack();
};
return (
<button onClick={handleGoBack}>Go Back</button>
);
}
export default withRouter(MyComponent);
Используя любой из этих методов, вы можете включить событие onclick для запуска перенаправления обратно на предыдущую страницу с помощью React Router.