Question

我正在Meteor上构建一个Web应用程序，并尝试使用React-Router v4实现路由。我根据我的理解设置了React-Router V4文档之后的基本路由结构，但是，我的应用程序的任何页面都没有呈现。

当我运行我的应用程序时，控制台不会抛出任何错误;然而，没有任何渲染，甚至没有渲染页面，如果没有实现路由，否则将呈现。因此，出于某种原因，我的路由代码导致应用程序呈现空白页面，尽管App.js不为空。此外，作为测试，如果我键入一个任意路由（即'localhost：3000 / randomroute'），我不会抛出一个错误，说它不是一个有效的路由。控制台中没有任何事情发生。

以下是相关的代码段。

routes.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, BrowserRouter} from 'react-router-dom';
import { render } from 'react-dom';
import { App } from './App.js';


Meteor.startup(() => {
  ReactDOM.render(
    <BrowserRouter>
      <Route exact path="/" component={App}/>
    </BrowserRouter>,
     document.getElementById('render-target')
   );
});

main.js

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

import '../imports/client/routes';

main.html中

<head>
  <title>React Meteor Voting</title>
</head>

<body>
  <div id="render-target">

  </div>
</body>

App.js

import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import Item from '../client/Item';

import AccountsUIWrapper from '../ui/AccountsUIWrapper.js';
import Items from '../api/Items';


 class App extends Component {
   addItems(event) {
     event.preventDefault();
     const itemOne = this.refs.itemOne.value.trim();
     const itemTwo = this.refs.itemTwo.value.trim();
     if (itemOne != '' && itemTwo != '') {
    Meteor.call('insertNewItem', itemOne, itemTwo, (err, res) => {
      if (!err) {
        this.refs.itemOne.value = '';
        this.refs.itemTwo.value = '';
      }
    });
       this.refs.itemOne.value = '';
       this.refs.itemTwo.value = '';
      }
     }

showAll() {
  if(this.props.showAll) {
  Session.set('showAll', false);
} else  {
Session.set('showAll', true);
}
}



  render() {
    if (!this.props.ready) {
        return <div>Loading</div>
    }


    return (
    <div>
      <header>
        <h1>Level Up Voting</h1>
        <AccountsUIWrapper />
        <button onClick={this.showAll.bind(this)}>
          Show {this.props.showAll ? 'One' : 'All'}</button>
      </header>
        <main>
          <form className='new-items' onSubmit={this.addItems.bind(this)}>
            <input type='text' ref='itemOne' />
            <input type='text' ref='itemTwo'/>
            <button type='submit'> Add Items </button>
          </form>
            {this.props.items.map((item) => {
              return <Item item={item} key={item._id}/>
            } )}
        </main>

      </div>
    );
  }
}

export default createContainer(() => {
  let itemsSub = Meteor.subscribe('allItems');
  let showAll = Session.get('showAll');
  return{ showAll,
    ready: itemsSub.ready(),
    items: Items.find({}, {
      limit: showAll ? 50 : 1,
      sort: { lastUpdated: 1}
    }).fetch()
  }
}, App);

的package.json

    {
  "name": "votingAppReact",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.26.0",
    "bcrypt": "^1.0.3",
    "classnames": "^2.2.5",
    "history": "^4.7.2",
    "meteor-node-stubs": "^0.3.2",
    "react": "^16.2.0",
    "react-addons-pure-render-mixin": "^15.6.2",
    "react-dom": "^16.2.0",
    "react-komposer": "^2.0.0",
    "react-router": "^4.2.0",
    "react-router-3": "^3.2.2",
    "react-router-dom": "^4.2.2"
  }
}

如有任何帮助表示感谢，如果您想了解更多信息，请与我们联系！

React-Router V4渲染空白

0 个答案: