使用 React Router Native 时出现渲染错误

Question

我有这个

App.js

文件，其中包含以下内容：

import { StyleSheet } from 'react-native';
import Main from './src/components/Main';

export default function App() {
  return <Main />;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

以及包含以下代码的

Main.jsx

文件：

import React from 'react';
import { Text, View } from 'react-native';
import { NativeRouter, Switch, Route, Redirect } from 'react-router-native';

const HomeScreen = () => (
    <View>
        <Text>Welcome to the home screen!</Text>
    </View>
);

const AboutScreen = () => (
    <View>
        <Text>Welcome to the about screen!</Text>
    </View>
);

const NotFoundScreen = () => (
    <View>
        <Text>Sorry, this page was not found.</Text>
    </View>
);

const Main = () => {
    return (
        <NativeRouter>
            <Switch>
                <Route exact path="/" component={HomeScreen} />
                <Route exact path="/about" component={AboutScreen} />
                <Redirect from="/old-about" to="/about" />
                <Route component={NotFoundScreen} />
            </Switch>
        </NativeRouter>
    );
}

export default Main;

这是一个简单的例子，但我实验了这个错误：

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能会从定义组件的文件中导出组件，或者可能会混淆默认导入和命名导入。

这是有错误的屏幕截图：

预先感谢您的关注和帮助。

Answer 1

我今天也遇到同样的问题，解决方案是更改路由开关

const Main = () => {
return (
    <NativeRouter>
        <Routes>
            <Route exact path="/" component={HomeScreen} />
            <Route exact path="/about" component={AboutScreen} />
            <Redirect from="/old-about" to="/about" />
            <Route component={NotFoundScreen} />
        </Routes>
    </NativeRouter>
);};