反应路由器本机渲染链接组件超过前一个

Question

当我链接到一个组件时，它会呈现现有组件。它不“导航”，视图不会被链接的视图替换。

App.js：

import React, { Component } from 'react'
import {
  Text,
  TextInput,
  View,
  AppRegistry,
  TouchableHighlight,
  Image,    
  TouchableOpacity,
} from 'react-native'
import styles from './LoginStyleSheet';
import CircleCheckBox , {LABEL_POSITION} from 'react-native-circle-checkbox';
import SocialFooter from './SocialFooter';
import { NativeRouter, Route, Link, Redirect, withRouter } from 'react-router-native'
import TelUtiles from './TelUtiles';
//const { navigation } = this.props;
//const resp = navigation.getParam('resp', 'NO-resp');

const AuthExample = () => (

  <NativeRouter>
    <View style={styles.container}>
      <View style={styles.container_logo}>
        <Image source={require('./img/logo-main.png')} style={styles.logo_img} />
      </View>
      <View style={styles.welcomeMsg}>                                                         
        <Text 
            style={styles.welcomeMsg_textTop}>
            ¡Bienvenido a nuestra 
        </Text>
        <Text 
            style={styles.welcomeMsg_textBottom}>
            familia mascotera!
        </Text>
        <View style={styles.container_input_dni}>
            <TextInput placeholder='DNI:' placeholderTextColor="#E3A141" underlineColorandroid="#E3A141" style={styles.input_dni} />                        
        </View>
        <Link
          to="/protected"
          style={styles.navItem_login}
          underlayColor='#f0f4f7'>
            <Text style={styles.navItem_login_text}>Protected Page</Text>
        </Link>
      </View>
      <AuthButton/>
      <View style={styles.nav}>
        <Link
          to="/public"
          style={styles.navItem}
          underlayColor='#f0f4f7'>
            <Text>Public Page</Text>
        </Link>
        <Link
          to="/protected"
          style={styles.navItem}
          underlayColor='#f0f4f7'>
            <Text>Protected Page</Text>
        </Link>
        <Link
            to="/TelUtiles"
            style={styles.navItem_login}
            underlayColor='#f0f4f7'>
            <Image source={require('./img/icono-tel.png')} style={{width:70, height:70,margin:10}} />
        </Link>
      </View>

      <Route path="/public" component={Public}/>
      <Route path="/login" component={Login}/>
      <Route path="/TelUtiles" component={TelUtiles}/>
      <PrivateRoute path="/protected" component={Protected}/>


    </View>
  </NativeRouter>


)

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 100) // fake async
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 100)
  }
}

const AuthButton = withRouter(({ history }) => (
  fakeAuth.isAuthenticated ? (
    <View>
      <Text>Welcome!</Text>
      <TouchableHighlight style={styles.btn} underlayColor='#f0f4f7' onPress={() => {
        fakeAuth.signout(() => history.push('/'))
      }}><Text>Sign out</Text></TouchableHighlight>
    </View>
  ) : (
    <Text>You are not logged in.</Text>
  )
))

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

const Public = () => <Text style={styles.header}>Public</Text>
const Protected = () => <Text style={styles.header}>Protected</Text>

class Login extends Component {
  state = {
    redirectToReferrer: false
  }

  login = () => {
    fakeAuth.authenticate(() => {
      this.setState({ redirectToReferrer: true })
    })
  }

  render() {
    const { from } = this.props.location.state || { from: { pathname: '/' } }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer) {
      return (
        <Redirect to={from}/>
      )
    }

    return (
      <View>
        <Text>You must log in to view the page at {from.pathname}</Text>

        <TouchableHighlight style={styles.btn} underlayColor='#f0f4f7' onPress={this.login}>
          <Text>Log in</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

export default AuthExample