React Component未呈现

Question

我的"Home"反应组件存在问题.

我正在使用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';