React Router renders two components on the same page - reactjs

Question

I've looked at the other questions similar to this, and none of them seem to solve this.
I want to use react router to link to another page.
This is the return of my component:
<NativeRouter>
<View style={styles.container}>
<TextInput
onChangeText={value => this.onChangeText('username', value)}
style={styles.input}
placeholder='username'
/>
<TextInput
onChangeText={value => this.onChangeText('password', value)}
style={styles.input}
secureTextEntry={true}
placeholder='password'
/>
<Button style={styles.button} title="Sign In" onPress={this.signIn.bind(this)} />
<TextInput
onChangeText={value => this.onChangeText('confirmationCode', value)}
style={styles.input}
placeholder='Confirmation Code'
/>
<Button style={styles.button} title="Confirm Sign In" onPress={this.confirmSignIn.bind(this)} />
<Link to='/forgotPassword'>
<Text>Forgot Password</Text>
</Link>
<Switch>
<Route path='/forgotPassword' component={ForgotPassword} />
</Switch>
</View>
</NativeRouter>
Whenever I click on the link, the link renders the ForgotPassword component on the same page.
Ideas?
This is inside my app.js.
<Switch>
<Route path="/signin" component={SignIn} />
<Route path="/forgotPassword" component={ForgotPassword} />
</Switch>
</View>

Answer 1

the Route inside your component will get replaced with ForgoPassword component when the url matches, You should define the routes in the parent component
Example
import React from "react";
import { StyleSheet, Text, View, AppRegistry } from "react-native";
import { NativeRouter, Route, Link } from "react-router-native";
const Home = () => <Text style={styles.header}>Home</Text>;
const SignIn = () => <Text style={styles.header}>SignIn</Text>;
const ForgotPassword = () => <Text style={styles.header}>ForgotPassword</Text>;
const App = () => (
<NativeRouter>
<View style={styles.container}>
<View style={styles.nav}>
<Link to="/" underlayColor="#f0f4f7" style={styles.navItem}>
<Text>Home</Text>
</Link>
<Link to="/signIn" underlayColor="#f0f4f7" style={styles.navItem}>
<Text>Sign In</Text>
</Link>
<Link
to="/forgotPassword"
underlayColor="#f0f4f7"
style={styles.navItem}
>
<Text>Forgot Password</Text>
</Link>
</View>
<Route exact path="/" component={Home} />
<Route path="/signIn" component={SignIn} />
<Route path="/forgotPassword" component={ForgotPassword} />
</View>
</NativeRouter>
);
const styles = StyleSheet.create({
container: {
marginTop: 25,
padding: 10
},
header: {
fontSize: 20
},
nav: {
flexDirection: "row",
justifyContent: "space-around"
},
navItem: {
flex: 1,
alignItems: "center",
padding: 10
},
subNavItem: {
padding: 5
},
topic: {
textAlign: "center",
fontSize: 15
}
});
AppRegistry.registerComponent("MyApp", () => App);
sandbox