使用React Router Native时出现渲染错误，请求排查解决

核心问题原因 #

你遇到的Element type is invalid错误，本质是react-router-native版本不兼容：当前使用的v6版本已移除了Switch、Redirect组件，同时Route组件的component属性也被替换，导致你代码中导入的这些组件为undefined，触发类型校验失败。

修复方案 #

方案一：适配react-router-native v6（推荐） #

修改Main.jsx代码如下，完全适配v6的API规范：

import React from 'react';
import { Text, View } from 'react-native';
import { NativeRouter, Routes, Route, Navigate } 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>
            <Routes>
                <Route path="/" element={<HomeScreen />} />
                <Route path="/about" element={<AboutScreen />} />
                <Route path="/old-about" element={<Navigate to="/about" />} />
                <Route path="*" element={<NotFoundScreen />} />
            </Routes>
        </NativeRouter>
    );
}

export default Main;

关键变更说明

• 用Routes组件替代原有的Switch
• 用Navigate组件替代原有的Redirect
• Route组件不再使用component属性，改用element属性，需传入JSX元素（而非组件引用）
• 404路由通过path="*"匹配所有未定义路径

方案二：降级到react-router-native v5 #

若需保留原有代码结构，可安装v5版本：

npm install react-router-native@5.3.0
# 或使用yarn
yarn add react-router-native@5.3.0

安装完成后，原有代码即可正常运行，无需修改。

内容的提问来源于stack exchange，提问作者InfZero