路由“登录”的组件必须是反应组件

Question

I hope all of you are doing well and good. I saw many answers related to this and implemented many answers on my code but seems like nothing worked for me. I keep getting this annoying error. What could be the reason? I am using react-native-router-flux for routing and expo for project.

Login.js

 import React from "react"; import { StyleSheet, Text, View, TouchableOpacity } from "react-native"; import { Actions } from "react-native-router-flux"; import Logo from "../components/Logo"; class Login extends React.Component { signup() { Actions.signup(); } render() { return ( <View style={styles.container}> <Logo /> <form type="Login" /> <View style={styles.signupTextCont}> <Text style={styles.signupText}> You don't have an account yet?{" "} </Text> <TouchableOpacity onPress={this.signup}> <Text style={styles.signupButton}>Signup</Text> </TouchableOpacity> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fbc02d", alignItems: "center", justifyContent: "center", }, signupTextCont: { flex: 1, alignItems: "flex-end", justifyContent: "center", paddingVertical: 16, flexDirection: "row", }, signupText: { color: "rgba(255,255,255,0.7)", fontSize: 16, }, signupButton: { color: "#ffffff", fontSize: 16, fontWeight: "500", }, }); export default Login;

Routes.js

 import React from "react"; import { Stack, Router, Scene } from "react-native-router-flux"; import Login from "./Login"; import Signup from "./Signup"; class Routes extends React.Component { render() { return ( <Router> <Stack key="root" hideNavBar={true}> <Scene key="login" Component={Login} title="Login" /> <Scene key="signup" Component={Signup} title="Signup" /> </Stack> </Router> ); } } export default { Routes };

Please help in this regard as soon as possible because i need to submit it:(

Answer 1

There is a small typo in your code it's component instead of Component .

      <Router>
        <Stack key="root" hideNavBar={true}>
          <Scene key="login" component={Login} title="Login" />
          <Scene key="signup" component={Signup} title="Signup" />
        </Stack>
      </Router>