React Component not rendered

Question

I have an issue with my "Home" react component.

I am using react-router, and have a route file that contains the following:

 <Router history={ browserHistory }>
      <Route path="/" component={ App }>
        <IndexRoute component={ Home } />
      </Route>
    </Router>

Now, my Home component works when defined like this:

export const Home = () => <h3>Index</h3>;

But if I defined it like this:

class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h3>InDex2</h3>
    );
  }
}

export default Home;

Then it is not working. Nothing gets rendered in the second case, while in the first case I can see 'Index'...

Do you have an idea why this is not working?

My App component is as simple as this:

export const App = ( { children } ) => (
  <div>
    <AppNavigation />
    { children }
    <Alert stack={{limit: 3}} />
  </div>
)

Thanks.

Answer 1

To import your first component, you need to take the named export Home:

// Home.js
export const Home = () => <h3>Index</h3>;

// someOtherFile.js
import { Home } from './Home';

In your second case, you need to take the default export:

// someOtherFile.js
import Home from './Home';