流星反应路由器渲染什么

问题描述：

我按照本指南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时，没有错误。在浏览器的控制台中也没有任何错误，但只有一个空白页面。我错过了什么吗？

答

您没有返回您的路线。

它应该像下面，

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

@LokiSinclair您可以尝试更改'渲染（renderRoutes（），document.getElementById（'app'））;'渲染（renderRoutes， document.getElementById（'app'））;' – bennygenel

这会导致：“警告：函数作为React子元素无效，如果您从渲染返回Component而不是，或者您打算调用此函数而不是返回它。“ - 输出到控制台。 – LokiSinclair

答

不幸的是，这不是流星抛出一个错误。有我的路由器定义一个问题，它实际上应该是：

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

公告列入div - 因为它会出现路由器只能有一个子元素。

流星反应路由器渲染什么

相关推荐