React Navigation报错求助：路由组件需为React Component

Hey Patrick, I’ve hit this exact frustrating error multiple times while setting up React Navigation, so let’s break down the most likely culprits based on your setup:

1. You’re using the wrong import syntax for your default-exported Feed component #

Since you said Feed is default exported, your router.js needs to import it without curly braces. It’s super easy to mix this up with named exports:

❌ Wrong (named import, won’t work for default export):

import { Feed } from '../components/Feed';

✅ Correct (default import):

import Feed from '../components/Feed';

If you accidentally use curly braces here, you’ll end up importing undefined instead of the actual component, which triggers that error.

2. Double-check your Feed component’s export statement #

Even if you think you default exported it, it’s worth verifying the end of Feed.js:

Make sure it looks like one of these:

// Option 1: Export inline
export default class Feed extends React.Component {
  // ... your component code
}

// Option 2: Export after definition
class Feed extends React.Component {
  // ... your component code
}
export default Feed;

Avoid typos like export class Feed (named export) instead of export default class Feed—that would require the curly brace import we talked about earlier.

3. You’re passing a component instance instead of the component itself #

Another common slip-up: in your router config, did you accidentally call the component instead of referencing it?

❌ Wrong (invokes the component, returns JSX instead of passing the component class):

const Stack = createStackNavigator({
  SomeRoute: { component: Feed() } // Notice the parentheses!
});

✅ Correct (passes the component reference):

const Stack = createStackNavigator({
  SomeRoute: { component: Feed }
});

4. Check for circular imports #

If your Feed.js imports something from router.js (or vice versa indirectly), it can cause the component to be undefined when React Navigation tries to load it. For example:

• Feed.js imports a navigation helper from router.js
• router.js imports Feed from Feed.js

This creates a loop where neither module fully loads before the other references it. Try moving shared code to a separate file to break the cycle.

Quick debugging trick #

Add a console.log(Feed) right after importing it in router.js. If the output is undefined or something that’s not a React component class/function, you know the issue is with how you’re importing or exporting the component.

内容的提问来源于stack exchange，提问作者patrick.tresp