недопустимый тип элемента: ожидается строка или класс / функция, но есть объект

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 />;
}

Я использую реагирующую навигацию v5, I Я все еще новичок, и я изучал его новую версию. Однако я не могу определить причину этой ошибки. Ошибка возвращает, что она ожидает функцию или класс, но разве это не функция?

Изображение ошибки

Answer 1

Изменить маршруты. 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>
);

Изменить приложение. 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} />;
}