Javascript 流星无反应_Javascript_Reactjs_Meteor_React Router

Javascript 流星无反应

javascript reactjs meteor

Javascript 流星无反应,javascript,reactjs,meteor,react-router,Javascript,Reactjs,Meteor,React Router,我遵循这个指南，但不幸的是，我的应用程序现在没有呈现任何内容（添加路由后，该应用程序在之前工作正常），我看不到任何错误 App.jsx import React, { Component } from 'react'; import Navigation from './components/Navigation'; import LoginForm from './components/LoginForm'; export default class App extends Componen

我遵循这个指南，但不幸的是，我的应用程序现在没有呈现任何内容（添加路由后，该应用程序在之前工作正常），我看不到任何错误

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

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

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

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

从“React”导入React；
从'react dom'导入{render}；
从“react Router”导入{Router，Route}；
从“历史记录/createBrowserHistory”导入createBrowserHistory；
从“../imports/ui/App.jsx”导入应用程序；
从“../imports/ui/components/LoginForm.jsx”导入LoginForm；
const browserHistory=createBrowserHistory（）；
导出常量renderRoutes=（）=>(
);

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

export const renderRoutes=（）=>(
);
//或
导出常量renderRoutes=（）=>{
返回(
);
};

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

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

export const renderRoutes=（）=>(
);

请注意包含的

div

-似乎路由器只能有一个子元素。

感谢您发现了这一点，不幸的是，即使更改也只能呈现空白页面：（@LokiSinclair您可以尝试更改

render（renderRoutes（），document.getElementById（'app'）；

到

render吗（renderRoutes，document.getElementById（'app'））；

结果是：“警告：函数作为React子函数无效。如果您返回的是组件而不是从render返回，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。”-输出到控制台。