反应本机堆栈导航goBack（）不起作用

Question

I created common header for all pages, so create header component then i include that header in signup.js component goback navigation function working in signup.js page but not working header component getting undefined object navigate.goback error

Anyone give a solution for that like that i include component

sample code:

 import React from 'react'; import { StyleSheet, Text, View, Image, ScrollView, TextInput,KeyboardAvoidingView, StatusBar } from 'react-native'; import {Icon,Body,Button,Title,Left,Right} from 'native-base'; import Expo from "expo"; import { Constants } from 'expo'; import Headerbar from "./../Header/header"; import Statusbar from "./../statusbar"; const googleIcon=require('../../../img/google_icon.png'); const fbIcon=require('../../../img/fb_icon.png'); export default class Socialsignup extends React.Component { constructor(props) { super(props); this.state = { }; } render() { return ( <ScrollView style={styles.socialContainer} scrollEnabled={true}> <Statusbar/> <Headerbar title="Social Login" /> <View style={styles.socialText}> <Text style={styles.accountText}>Choose an account</Text> </View> <View style={styles.socialIconsBase}> <View style={styles.socialIconsGoogle}> <Image source={googleIcon} style={styles.googleIcon}/> <Text style={styles.iconText}> Google </Text> </View> <View style={styles.socialIconsGoogle}> <Image source={fbIcon} style={styles.fbIcon}/> <Text style={styles.iconText}> Facebook </Text> </View> </View> </ScrollView> ); } } const styles = StyleSheet.create({ socialContainer: { backgroundColor: '#fff', }, accountText: { marginTop:25, fontSize:20, padding:20 }, socialIconsBase: { flexDirection:'row', flex:1, marginTop:40, borderBottomWidth:1, borderBottomColor:'#a8c0ce' }, socialIconsGoogle: { flex:1, alignItems:'center', paddingTop:25, paddingBottom:25, borderRightWidth:1, borderRightColor:'#a8c0ce', marginBottom:8, }, fbIcon:{ height:50, width:50, }, googleIcon:{ height:50, width:50, }, iconText:{ fontSize:15, marginTop:15 } }); 

Answer 1

you need to use this inside the header component :

import { withRouter } from 'react-router'

and then instead of export default HeaderClassName

use export default withRouter(HeaderClassName)

and you can go back by this.props.history.goBack()

You need to use this too:

<BrowserRouter>
<App />

and then add the pages like that

<Route path='/page' component={Page} />