Question

我正在使用React-Native和React-Router组合一个应用程序。我有几页导航，似乎都按预期工作。

在我的登录组件中，我想在用户通过身份验证后重定向，这就是我似乎陷入困境的地方。

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {StyleSheet, View, TextInput, Image, TouchableOpacity, Text} from 'react-native'
import {Redirect} from 'react-router-native'

import {fetchAuth} from './actions/login.actions'

export class LoginForm extends Component {
    async onLoginPress() {
        this.props.fetchAuth(this.state)
        if (this.props.loginState.authStatus > 0) {
            console.log("Logged in");
            return (
                <Redirect to="/logged_in_page"/>
            )
        } else {
            console.log("Not logged in");
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <View>
                    <TextInput
                        onChangeText={(text) => this.setState({username: text})}
                    />
                    <TextInput
                        onChangeText={(text) => this.setState({password: text})}
                    />
                </View>
                <TouchableOpacity onPress={this.onLoginPress.bind(this)}>
                    <Image
                        source={require('./images/btn.png')}
                    >
                        <Text >Login</Text>
                    </Image>
                </TouchableOpacity>
            </View>
        )
    }
}

注意：我的IDE告诉我它无法解决＆＃34;重定向＆＃34;在import语句中，但它也表示对于＆＃34; Switch＆＃34;在我的App.js中，但似乎没有问题。

我没有问题就得到了两个console.logs，但是重新指导并没有做任何事情。我错过了什么？

Answer 1

<Redirect />是一个组件。

您必须将其放在render()方法中，并在需要重定向时进行渲染。

像这样的东西

export class LoginForm extends Component {
    async onLoginPress() {
        this.props.fetchAuth(this.state)
    }

    render() {
        if (this.props.loginState.authStatus > 0) {
            return <Redirect to="/logged_in_page"/>
        } 

        return (
            <View style={styles.container}>
                <View>
                    <TextInput
                        onChangeText={(text) => this.setState({username: text})}
                    />
                    <TextInput
                        onChangeText={(text) => this.setState({password: text})}
                    />
                </View>
                <TouchableOpacity onPress={this.onLoginPress.bind(this)}>
                    <Image
                        source={require('./images/btn.png')}
                    >
                        <Text >Login</Text>
                    </Image>
                </TouchableOpacity>
            </View>
        )
    }
}

使用react-router-native V4进行重定向

1 个答案: