React Router renders two components on the same page

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