Question

我遵循本指南Meteor React Routing，但不幸的是，我的应用现在什么也没有呈现（在添加路由后，应用程序之前工作正常），我看不出有什么不对< / p>

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

Answer 1

您没有归还路线。

应该如下，

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

Answer 2

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

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

请注意包含div - 因为看起来路由器只能有一个子元素。

流星反应路由器渲染没什么

2 个答案: