React native stack navigation goBack() not working - reactjs

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} />