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
- 2167 reads