流星反應路由器渲染什麼

我按照本指南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時，沒有錯誤。在瀏覽器的控制檯中也沒有任何錯誤，但只有一個空白頁面。我錯過了什麼嗎？

來源

2017-10-09 LokiSinclair

您沒有返回您的路線。

它應該像下面，

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> 
    ); 
};

來源

2017-10-09 21:06:00 bennygenel

感謝您發現，不幸的是，即使這種變化只呈現空白頁也：（ – 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 - 因爲它會出現路由器只能有一個子元素。

來源

2017-10-10 12:23:38 LokiSinclair

流星反應路由器渲染什麼

回答

相關問題