react router Редирект программно из функции (action)
Primary tabs
Решить данную задачу можно с помощью кода вроде:
/* Define callback with props.history in component, with call action (function) during which you should redirect */ import { withRouter } from "react-router" function Header(props) { const { classes, onDrawerToggle } = props; const redirectCallback = React.useCallback((location) => { props.history.push(location); }, [props.history] ); const loginBack = () => (event) => { event.preventDefault(); props.dispatch(authBack(redirectCallback)); // pass callback to function (action)! }; return ( <React.Fragment> </React.Fragment > ); } Header.propTypes = { classes: PropTypes.object.isRequired, onDrawerToggle: PropTypes.func.isRequired, }; export default connect(state => ({ }))(withRouter(Header));
-- основная идея тут состоит в том, чтобы передавать в функцию, при выполнении которой нужно сделать редирект колбек (в примере выше используется redux), определенный в компоненте, который эту функцию вызывает:
const loginBack = () => (event) => { event.preventDefault(); props.dispatch(authBack(redirectCallback)); // pass callback to function (action)! };
ну в этот колбек уже, так как он часть компонента может работать с react router, а конкретно с пропсом history, в примере выше это:
const redirectCallback = React.useCallback((location) => { props.history.push(location); }, [props.history] );
(использован синтаксис react hooks)
- Log in to post comments
- 1618 reads