React Router Native Renders Linked Component Over Previous One

When i link to a component this renders but over the existing component. It doesn't 'navigate', the view is not being replaced with the linked one. App.js: import React, { Componen

Solution 1:

If you only want to render the content of AuthExample on a certain route, you could break that out into a separate component and render that on the index route / and also use a Switch component to make sure that only one of the Route components in the Switch are used at once.

Example

constMain = () => (
  <View><Viewstyle={styles.welcomeMsg}><Textstyle={styles.welcomeMsg_textTop}>¡Bienvenido a nuestra</Text><Textstyle={styles.welcomeMsg_textBottom}>familia mascotera!</Text><Viewstyle={styles.container_input_dni}><TextInputplaceholder="DNI:"placeholderTextColor="#E3A141"underlineColorAndroid="#E3A141"style={styles.input_dni}
        /></View><Linkto="/protected"style={styles.navItem_login}underlayColor="#f0f4f7"
      ><Textstyle={styles.navItem_login_text}>Protected Page</Text></Link></View><AuthButton /><Viewstyle={styles.nav}><Linkto="/public"style={styles.navItem}underlayColor="#f0f4f7"><Text>Public Page</Text></Link><Linkto="/protected"style={styles.navItem}underlayColor="#f0f4f7"><Text>Protected Page</Text></Link><Linkto="/TelUtiles"style={styles.navItem_login}underlayColor="#f0f4f7"
      ><Imagesource={require("./img/icono-tel.png")}
          style={{width:70, height:70, margin:10 }}
        /></Link></View></View>
);

constAuthExample = () => (
  <NativeRouter><Viewstyle={styles.container}><Viewstyle={styles.container_logo}><Imagesource={require("./img/logo-main.png")}
          style={styles.logo_img}
        /></View><Switch><Routeexactpath="/"component={Main} /><Routepath="/public"component={Public} /><Routepath="/login"component={Login} /><Routepath="/TelUtiles"component={TelUtiles} /><PrivateRoutepath="/protected"component={Protected} /></Switch></View></NativeRouter>
);