Question

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

我正在使用react-router。我添加了日志语句，并且似乎确实调用了renderRoutes（）函数，而且，当我更改imports的目录时，我在控制台中看到错误（如果将第一个import语句更改为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的原始代码（通常有效）-不难发现区别；）

渲染函数未调用

1 个答案: