React native navigating using a button - reactjs

Question

I want to navigate between pages using react-native.
I have total three pages. I can navigate from first -> second -> third page.
However, from the third page, when I try to go back to the first page I am getting an error "undefined is not an object (evaluating'_this2.props.navigation.navigate).
In the third page, unlike the other two pages, I imported a class to navigate back to the first page but it's giving me an error. Below is my code.
This is my App.js:
import React, {Component} from 'react'
import {View,Text,StyleSheet,ScrollView,Image,Button} from "react-native"
import FirstScreen from './FirstScreen'
import SecondScreen from './SecondScreen'
import ThirdScreen from './ThirdScreen'
import {StackNavigator} from 'react-navigation'
class App extends Component {
render(){
return(
<MyApp/>
)
}
}
const MyApp = StackNavigator({
Frist:FirstScreen,
Second:SecondScreen,
Third:ThirdScreen
})
export default App
This is my first screen code:
import React, {Component} from 'react'
import{ View,StyleSheet,Button} from 'react-native'
class FirstScreen extends Component{
render() {
return(
<View style={styles.container}>
<Button title="go to Second screen"
onPress={()=>this.props.navigation.navigate('Second')}>
</Button>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems: 'center',
justifyContent: 'center'
}
})
export default FirstScreen
This is my second screen code:
import React, {Component} from 'react'
import{ View, StyleSheet,Button} from 'react-native'
import CardDetail from './Components/CardDetail'
class SecondScreen extends Component {
render(){
return(
<View style={styles.container}>
<Button title="go to Third screen"
onPress={()=>this.props.navigation.navigate('Third')}/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
paddingTop:20,
alignItems: 'center',
justifyContent: 'center'
}
})
export default SecondScreen
This is my third screen code:
import React, {Component} from 'react'
import{ View,Button,StyleSheet} from 'react-native'
import CardDetail from './Components/CardDetail'
class ThirdScreen extends Component{
render() {
return(
<View style={styles.container}>
<CardDetail/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems: 'center',
justifyContent: 'center'
}
})
export default ThirdScreen
And this is the class I imported:
import React, {Component} from 'react'
import {View,
StyleSheet,
Button} from 'react-native'
class CardDetail extends Component{
render() {
return(
<View style={styles.container}>
<Button title="go back to First screen"
onPress={()=>this.props.navigation.navigate('First')}/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems: 'center',
justifyContent: 'center'
}
})
export default CardDetail

Answer 1

<CardDetail /> is not provided the navigation prop i.e.
<CardDetail navigation={this.props.navigation} />
react-navigation will provide the navigation prop automatically to screens specified in the navigator creation, but if you want children components on those screens to use it, you would need to give it to them via context or manually as above.

Answer 2

try looking into BrowserRouter
here is an example:
<Route path="/name" exact strict render={
()=> {
return (
<div> your code </div> ....