流星反应路由器不渲染答案

【问题标题】：Meteor react router rendering nothing流星反应路由器不渲染
【发布时间】：2018-03-21 03:55:05
【问题描述】：

我正在关注本指南 Meteor React Routing，但不幸的是，我的应用程序现在什么都不渲染（添加路由后，应用程序之前运行良好），我看不出有什么问题

App.jsx

import React, { Component } from 'react';
import Navigation from './components/Navigation';
import LoginForm from './components/LoginForm';

export default class App extends Component {
    render() {
      return (
            <div>
                <Navigation />
                <p>
                    <h1>Something here</h1>
                </p>
        </div>
      );
    }
}

main.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import { renderRoutes } from './Routes.jsx';

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

Routes.jsx

import React from 'react';
import { render } from 'react-dom';
import { Router, Route } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory';

import App from '../imports/ui/App.jsx';
import LoginForm from '../imports/ui/components/LoginForm.jsx';

const browserHistory = createBrowserHistory();

export const renderRoutes = () => (
    <Router history={browserHistory}>
        <Route exact path="/" component={App} />
        <Route path="/login" component={LoginForm} />
    </Router>
);

..和 html

<head>
  <title>Some title</title>
</head>

<body>
  <div id="app"></div>
</body>

我已验证所有导入都已解决。并且在运行meteor 时，没有错误。浏览器的控制台也没有任何错误，只是一个空白页面。我错过了什么吗？

【问题讨论】：

标签： javascript reactjs meteor react-router

【解决方案1】：

不幸的是，Meteor 中没有抛出一个错误。我的路由器定义存在问题，实际上应该是：

export const renderRoutes = () => (
    <Router history={browserHistory}>
        <div>
            <Route exact path="/" component={App} />
            <Route path="/login" component={LoginForm} />
        </div>
    </Router>
);

注意 div 的包含 - 因为看起来 Router 只能有一个子元素。

【讨论】：

【解决方案2】：

你没有返回你的路线。

应该像下面这样，

export const renderRoutes = () => (
    <Router history={browserHistory}>
        <Route exact path="/" component={App} />
        <Route path="/login" component={LoginForm} />
    </Router>
);

// or

export const renderRoutes = () => {
   return (
     <Router history={browserHistory}>
       <Route exact path="/" component={App} />
       <Route path="/login" component={LoginForm} />
    </Router>
   );
};

【讨论】：

感谢您发现这一点，不幸的是，即使该更改也只会呈现空白页:(
@LokiSinclair 你可以尝试将render(renderRoutes(), document.getElementById('app')); 更改为render(renderRoutes, document.getElementById('app'));
这导致：“警告：函数作为 React 子级无效。如果您从渲染返回一个组件而不是，则可能会发生这种情况。或者您可能打算调用此函数而不是不如退货。” - 输出到控制台。