未调用渲染函数

Question

我正在尝试让我的 React 组件在 Meteor 中呈现。我在控制台中没有看到任何错误消息或任何内容，但是，该组件似乎没有显示。

我正在使用 react-router。我添加了日志语句，看起来确实调用了 renderRoutes() 函数，而且，当我更改 imports 的目录时，我在控制台中看到错误（如果我将第一个导入语句更改为import {Home} from '../home/blah')。我不太确定接下来要尝试什么。

这是我的路由器，在 client/imports/lib/router.js。

import React from 'react';
import { Router, Route, Switch } from 'react-router';
import {createBrowserHistory} from 'history';

import {Home} from '../home/home';
import {Login} from '../login/login';
import {Connect} from '../connect/connect';

const browserHistory = createBrowserHistory();

export const renderRoutes = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route exact path="/login" component={Login}/>
      <Route exact path="/connect" component={Connect}/>
    </Switch>
  </Router>
);

这是我的主页。其他页面具有类似的结构。主页在 client/imports/home/home.js。

import React, { Component } from 'react';


export default class Home extends Component {

  constructor(){
   super()
   this.state = {
    }
  }

  render() {
    return (
      <div><h1>hello from the home page</h1></div>
    );
  }
}

最后，这是我的main.js。它在 client/main.js.

import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from './imports/lib/router.js';
import './main.html';

Meteor.startup(() => {
  render(renderRoutes(), document.getElementById('app'));
});

同样，我没有看到任何错误消息。主页只是不呈现。我将 console.log 放在 Home 组件的构造函数中，但我没有看到任何东西。我不确定 React 是否有我不理解的地方，或者我是否需要改变我使用路由器的方式。

请告诉我下一步应该尝试什么，如果有更多信息我应该包括在内。

谢谢！

Answer 1

如果您使用 export default

导出组件

export default class Home extends Component {

那么你应该这样导入它：

import Home from '../home/home';

阅读更多关于 named and default exports

对于未来 - 回到源头，首先检查原始代码（来自 docs）（通常工作） - 不难看出差异 ;)

未调用渲染函数

Render function is not called

meteor

reactjs

react-router

react-component