10 examples of 'how to handle browser back button in react js' in JavaScript

Every line of 'how to handle browser back button in react js' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
37componentDidMount() {
38 this._updateOnClick(this.props);
39}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

30function BackButton(props) {
31 const { intl, theme, ...rest } = props;
32 const label = intl.formatMessage(messages.back);
33 return (
34 <IconButton label={label} {...rest}>
35 {theme.direction === 'ltr' ? <ArrowBackIcon /> : <ArrowForwardIcon />}
36 </IconButton>
37 );
38}
5export default function useBackHandler(handler: () => void) {
6 useEffect(() => {
7 BackHandler.addEventListener('hardwareBackPress', handler)
8
9 return () => {
10 BackHandler.removeEventListener('hardwareBackPress', handler)
11 }
12 })
13}
13innerBack() {
14 if ((document.getElementsByClassName(styles.webView) as any)[0].canGoBack()) {
15 (document.getElementsByClassName(styles.webView) as any)[0].goBack();
16 }
17}
18onBackPress() {
19 if (this.state.canGoBack) {
20 this.webView.goBack();
21 } else {
22 this.props.navigation.goBack();
23 }
24}
11function BackButton({ label, ...props }) {
12 const theme = useTheme()
13 const [insideBarPrimary] = useInside('Bar:primary')
14
15 const { layoutName } = useLayout()
16 const compact = layoutName === 'small'
17 const horizontalPadding = (compact ? 2 : 3) * GU
18
19 return (
20 <ButtonBase
21 focusRingRadius={RADIUS}
22 focusRingSpacing={1}
23 css={`
24 display: inline-flex;
25 align-items: center;
26 border-radius: ${RADIUS}px 0 0 ${RADIUS}px;
27 height: 100%;
28 margin-left: ${insideBarPrimary ? -Bar.PADDING : 0}px;
29 /* Adjust for icon's padding on the left */
30 padding: 0 ${horizontalPadding}px 0 ${horizontalPadding - 4}px;
31 border-right: 1px solid ${theme.border};
32 color: ${theme.surfaceContent};
33 background: ${theme.surfaceInteractive};
34 &:active {
35 background: ${theme.surfaceHighlight};
36 }
37 `}
38 {...props}
39 >
40 <span
41 css={`
42 position: relative;
43 top: 2px;
44 color: ${theme.accent};
45 `}
46 >
47 <IconArrowLeft />
48 </span>
49 <span
50 css={`
51 padding-left: ${1 * GU}px;
52 font-size: 16px;
53 font-weight: 600;
54 `}
55 >
56 {label}
57 </span>
58 </ButtonBase>
59 )
60}
95function addBackButtonListener(backButton) {
96 new FastButton(backButton, function (e) {
97 e.preventDefault();
98 var options = this.getAttribute("data-page-options");
99 var effect = this.getAttribute("data-transition-effect");
100 var dataBack = backButton.getAttribute("data-back");
101 if (dataBack !== "") {
102 var dataBackAsInt = parseInt(dataBack);
103 that.options = options;
104 that.transitionEffect = effect;
105 that.backLinkPressed = true;
106 history.go(dataBackAsInt);
107 }
108 });
109}
11render() {
12 const { onPress, style, visible, modal } = this.props;
13 if (!visible) return null;
14 return (
15 <NavigationBarIcon
16 name={modal ? 'ios-arrow-down' : 'ios-arrow-back'}
17 style={style}
18 onPress={onPress}
19 />
20 );
21}
6render() {
7 return (React.createElement(style_1.StyledBrowserButton, { id: this.props.id, color: this.props.color ? this.props.color : 'default', onClick: this.props.onClick, disabled: this.props.disabled ? this.props.disabled : false, size: this.props.size, fontSize: this.props.fontSize }, this.props.children));
8}
87back() {
88 if (this.canGoBack) {
89 this.goBack();
90 } else {
91 Actions.pop();
92 }
93 return true;
94}

Related snippets