元素类型无效，预期是字符串或类函数，但得到的是对象。

Question

路线.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import SignIn from '~/pages/SignIn';
import SignUp from '~/pages/SignUp';

import Dashboard from '~/pages/Dashboard';

const Stack = createStackNavigator();

export default (isSigned = false) => (
  <NavigationContainer>
    <Stack.Navigator>
      {isSigned ? (
        <>
          <Stack.Screen name="SignIn" component={SignIn} />
          <Stack.Screen name="SignUp" component={SignUp} />
        </>
      ) : (
        <Stack.Screen name="Dashboard" component={Dashboard} />
      )}
    </Stack.Navigator>
  </NavigationContainer>
);

应用程序.js

import { useSelector } from 'react-redux';

import createRouter from './routes';

export default function App() {
  const isSigned = useSelector((state) => state.auth.signed);

  const Routes = createRouter(isSigned);

  return <Routes />;
}

我使用的是react导航v5，我还是个初学者，我正在研究它的新版本。但是，我无法定义这个错误的原因。错误返回说它期待一个函数或类，但这不是一个函数吗？

错误图片

Answer 1

像这样修改 routes.js。

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import SignIn from '~/pages/SignIn';
import SignUp from '~/pages/SignUp';

import Dashboard from '~/pages/Dashboard';

const Stack = createStackNavigator();

export default ({ isSigned }) => (
  <NavigationContainer>
    <Stack.Navigator>
      {isSigned ? (
        <>
          <Stack.Screen name="SignIn" component={SignIn} />
          <Stack.Screen name="SignUp" component={SignUp} />
        </>
      ) : (
        <Stack.Screen name="Dashboard" component={Dashboard} />
      )}
    </Stack.Navigator>
  </NavigationContainer>
);

像这样修改App.js。

import { useSelector } from 'react-redux';

import Routes from './routes';

export default function App() {
  const isSigned = useSelector((state) => state.auth.signed);

  return <Routes isSigned={isSigned} />;
}