未调用渲染函数答案

【问题标题】：Render function is not called未调用渲染函数
【发布时间】：2019-10-24 09:00:56
【问题描述】：

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

我正在使用react-router。我添加了日志语句，并且似乎确实调用了 renderRoutes() 函数，而且，当我更改 imports 的目录时，我在控制台中看到错误（如果我将第一个导入语句更改为 @987654323，则会出现错误@)。我不确定下一步该尝试什么。

这是我的路由器，位于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 是否有一些我不理解的地方，或者我是否需要改变我使用路由器的方式。

请让我知道接下来我应该尝试什么，如果有任何更多信息我应该包括在内。

谢谢！

【问题讨论】：

import Home from ?
也许render(renderRoutes(), ...) 是个问题。您是否尝试过使用 `render(,...)` - 更改大小写以将其作为组件。
另一个问题，可能与您的错误无关：Home 的构造函数有一个参数props，它应该调用super(props)，而不是super()。
@xadm 在 import 语句中去掉组件周围的括号就可以了。您可以在下面发布您的答案，以便我将其标记为答案吗？

标签： reactjs meteor react-router react-component

【解决方案1】：

如果您使用 export default 导出组件

export default class Home extends Component {

那么你应该这样导入它：

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

阅读更多关于named and default exports

对于未来 - 回到源头，首先检查原始代码（来自docs）（通常有效） - 不难看出区别;）

【讨论】：