Unmatched Route Page could not be found in React Native Expo - Stack Overflow

admin管理员组

文章数量:1277570

So, I'm trying to load a Login and Sign Up page on my web view for expo. However when I go to the link xx/LoginStart or xx/SignUp it prompts to me that there is an unmatched route and the page could not be found.

This is my App.tsx page;

const Stack = createNativeStackNavigator();
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { useFonts } from "expo-font";
import SignUpStart from "./screens/SignUpStart";
import LoginStart from "./screens/LoginStart";

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { View, Text, Pressable, TouchableOpacity } from "react-native";

const App = () => {
  const [hideSplashScreen, setHideSplashScreen] = React.useState(true);

  const [fontsLoaded, error] = useFonts({
    "Carlito-Regular": require("../assets/fonts/Carlito-Regular.ttf"),
    "Carlito-Bold": require("../assets/fonts/Carlito-Bold.ttf"),
  });

  if (!fontsLoaded && !error) {
    return null;
  }

  return (
    <>
      <NavigationContainer>
        {hideSplashScreen ? (
          <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen
              name="SignUp"
              component={SignUpStart}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="LoginStart"
              component={LoginStart}
              options={{ headerShown: false }}
            />
          </Stack.Navigator>
        ) : null}
      </NavigationContainer>
    </>
  );
};
export default App;

This would be my SignUpStart.tsx page:

import * as React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { Image } from "expo-image";
import { Button } from "react-native-paper";
import { LinearGradient } from "expo-linear-gradient";
import Vector from "../../assets/images/Vector.svg";
import {
  FontFamily,
  Color,
  Border,
  FontSize,
  Gap,
  Padding,
} from "../GlobalStyles";

const SignUpStart = () => {
  return (
    <View style={styles.signupstart}>
      <ScrollView style={[styles.container, styles.containerFlexBox]}>
        <View style={styles.bgImage}>
          <View style={styles.vectorParent}>
            <Vector style={styles.vectorIcon} width={60} height={40} />
            <Text style={[styles.mustafaReward, styles.textTypo]}>
              Mustafa Reward
            </Text>
          </View>
        </View>
        <View style={styles.content}>
          <LinearGradient
            style={[styles.cardpoints, styles.cardpointsBorder]}
            locations={[0, 1]}
            colors={["rgba(255, 255, 255, 0.7)", "rgba(255, 255, 255, 0.9)"]}
          >
            <View style={styles.singUpParent}>
              <Text style={[styles.singUp, styles.textTypo]}>Sing Up</Text>
              <View style={styles.frameParent}>
                <View style={styles.firstNameParent}>
                  <Text style={[styles.firstName, styles.textTypo]}>
                    First Name
                  </Text>
                  <Text style={[styles.text, styles.textTypo]}>*</Text>
                </View>
                <View
                  style={[styles.enterEmailWrapper, styles.cardpointsBorder]}
                >
                  <Text style={[styles.enterEmail, styles.textLayout]}>
                    Enter email
                  </Text>
                </View>
              </View>
              <View style={styles.frameParent}>
                <View style={styles.firstNameParent}>
                  <Text style={[styles.firstName, styles.textTypo]}>
                    Last Name
                  </Text>
                  <Text style={[styles.text, styles.textTypo]}>*</Text>
                </View>
                <View
                  style={[styles.enterEmailWrapper, styles.cardpointsBorder]}
                >
                  <Text style={[styles.enterEmail, styles.textLayout]}>
                    Enter email
                  </Text>
                </View>
              </View>
              <View style={styles.frameParent}>
                <View style={styles.firstNameParent}>
                  <Text style={[styles.firstName, styles.textTypo]}>
                    WhatsApp Number
                  </Text>
                  <Text style={[styles.text, styles.textTypo]}>*</Text>
                </View>
                <View
                  style={[styles.enterEmailWrapper, styles.cardpointsBorder]}
                >
                  <Text style={[styles.enterEmail, styles.textLayout]}>
                    Enter email
                  </Text>
                </View>
              </View>
              <Button
                style={[styles.bthistory, styles.containerFlexBox]}
                mode="contained"
                labelStyle={styles.bTHistoryBtn}
                onPress={() => {}}
                contentStyle={styles.bTHistoryBtn1}
              >
                Sign Up
              </Button>
            </View>
          </LinearGradient>
        </View>
      </ScrollView>
    </View>
  );
};

Am I missing something on the routing?

So, I'm trying to load a Login and Sign Up page on my web view for expo. However when I go to the link xx/LoginStart or xx/SignUp it prompts to me that there is an unmatched route and the page could not be found.

This is my App.tsx page;

const Stack = createNativeStackNavigator();
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { useFonts } from "expo-font";
import SignUpStart from "./screens/SignUpStart";
import LoginStart from "./screens/LoginStart";

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { View, Text, Pressable, TouchableOpacity } from "react-native";

const App = () => {
  const [hideSplashScreen, setHideSplashScreen] = React.useState(true);

  const [fontsLoaded, error] = useFonts({
    "Carlito-Regular": require("../assets/fonts/Carlito-Regular.ttf"),
    "Carlito-Bold": require("../assets/fonts/Carlito-Bold.ttf"),
  });

  if (!fontsLoaded && !error) {
    return null;
  }

  return (
    <>
      <NavigationContainer>
        {hideSplashScreen ? (
          <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen
              name="SignUp"
              component={SignUpStart}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="LoginStart"
              component={LoginStart}
              options={{ headerShown: false }}
            />
          </Stack.Navigator>
        ) : null}
      </NavigationContainer>
    </>
  );
};
export default App;

This would be my SignUpStart.tsx page:

import * as React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { Image } from "expo-image";
import { Button } from "react-native-paper";
import { LinearGradient } from "expo-linear-gradient";
import Vector from "../../assets/images/Vector.svg";
import {
  FontFamily,
  Color,
  Border,
  FontSize,
  Gap,
  Padding,
} from "../GlobalStyles";

const SignUpStart = () => {
  return (
    <View style={styles.signupstart}>
      <ScrollView style={[styles.container, styles.containerFlexBox]}>
        <View style={styles.bgImage}>
          <View style={styles.vectorParent}>
            <Vector style={styles.vectorIcon} width={60} height={40} />
            <Text style={[styles.mustafaReward, styles.textTypo]}>
              Mustafa Reward
            </Text>
          </View>
        </View>
        <View style={styles.content}>
          <LinearGradient
            style={[styles.cardpoints, styles.cardpointsBorder]}
            locations={[0, 1]}
            colors={["rgba(255, 255, 255, 0.7)", "rgba(255, 255, 255, 0.9)"]}
          >
            <View style={styles.singUpParent}>
              <Text style={[styles.singUp, styles.textTypo]}>Sing Up</Text>
              <View style={styles.frameParent}>
                <View style={styles.firstNameParent}>
                  <Text style={[styles.firstName, styles.textTypo]}>
                    First Name
                  </Text>
                  <Text style={[styles.text, styles.textTypo]}>*</Text>
                </View>
                <View
                  style={[styles.enterEmailWrapper, styles.cardpointsBorder]}
                >
                  <Text style={[styles.enterEmail, styles.textLayout]}>
                    Enter email
                  </Text>
                </View>
              </View>
              <View style={styles.frameParent}>
                <View style={styles.firstNameParent}>
                  <Text style={[styles.firstName, styles.textTypo]}>
                    Last Name
                  </Text>
                  <Text style={[styles.text, styles.textTypo]}>*</Text>
                </View>
                <View
                  style={[styles.enterEmailWrapper, styles.cardpointsBorder]}
                >
                  <Text style={[styles.enterEmail, styles.textLayout]}>
                    Enter email
                  </Text>
                </View>
              </View>
              <View style={styles.frameParent}>
                <View style={styles.firstNameParent}>
                  <Text style={[styles.firstName, styles.textTypo]}>
                    WhatsApp Number
                  </Text>
                  <Text style={[styles.text, styles.textTypo]}>*</Text>
                </View>
                <View
                  style={[styles.enterEmailWrapper, styles.cardpointsBorder]}
                >
                  <Text style={[styles.enterEmail, styles.textLayout]}>
                    Enter email
                  </Text>
                </View>
              </View>
              <Button
                style={[styles.bthistory, styles.containerFlexBox]}
                mode="contained"
                labelStyle={styles.bTHistoryBtn}
                onPress={() => {}}
                contentStyle={styles.bTHistoryBtn1}
              >
                Sign Up
              </Button>
            </View>
          </LinearGradient>
        </View>
      </ScrollView>
    </View>
  );
};

Am I missing something on the routing?

• react-native
• expo

Share Improve this question Follow asked Feb 24 at 4:35 Udhayan NairUdhayan Nair 47022 gold badges88 silver badges2525 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

What you're trying to achieve may not work directly since you're not using expo-router.

Since you're using @react-navigation/native to handle navigation, you will need to add the linking prop to your NavigationContainer if you want to navigate to a specific screen using its route. Also, you'll need to install the expo-linking package.

Pass the linking prop this way:

 <NavigationContainer
            linking={{
              prefixes: ['http://localhost:8081'], <--- change to your port number
              config: {
                screens: {
                  SignUp: "SignUp",
                  LoginStart: "LoginStart",
                },
              },
            }}
          >
    ...
   </NavigationContainer>

This way you can paste http://localhost:8081/SignUp or http://localhost:8081/LoginStart in your browser to navigate to the respective screens.

References:
1.Expo router: https://docs.expo.dev/versions/latest/sdk/router/

2.Expo linking: https://docs.expo.dev/versions/latest/sdk/linking/

本文标签： Unmatched Route Page could not be found in React Native ExpoStack Overflow