反应组件未呈现

Question

我的“主页”反应组件有问题。

我正在使用 react-router，并且有一个包含以下内容的路由文件：

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

现在，我的 Home 组件在这样定义时可以工作：

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

但如果我这样定义：

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

export default Home;

然后它不工作。在第二种情况下什么都没有呈现，而在第一种情况下我可以看到“索引”...

你知道为什么这不起作用吗？

我的 App 组件就这么简单：

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

谢谢。

Answer 1

要导入您的第一个组件，您需要使用命名导出Home：

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

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

在第二种情况下，您需要使用default 导出：

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