反应路由器本机在前一个组件上呈现链接的组件 [英] 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, { 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

推荐答案

如果你只想在某个路由上渲染 AuthExample 的内容，你可以把它分解成一个单独的组件并渲染在索引路由 / 上使用一个 Switch 组件来确保 Switch<中只有一个 Route 组件/code> 一次使用.

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.

示例

const Main = () => (
  <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>
  </View>
);

const AuthExample = () => (
  <NativeRouter>
    <View style={styles.container}>
      <View style={styles.container_logo}>
        <Image
          source={require("./img/logo-main.png")}
          style={styles.logo_img}
        />
      </View>

      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/public" component={Public} />
        <Route path="/login" component={Login} />
        <Route path="/TelUtiles" component={TelUtiles} />
        <PrivateRoute path="/protected" component={Protected} />
      </Switch>
    </View>
  </NativeRouter>
);

这篇关于反应路由器本机在前一个组件上呈现链接的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！