ReactJS没有加载/渲染

时间:2017-03-13 19:07:56

标签: javascript reactjs react-router

今天当我启动iMac继续处理ReactJS应用程序时...它没有加载......

我的意思是“加载”是,它不显示任何页面的内容。

错误:

  

未捕获的TypeError:无法读取未定义的属性“getCurrentLocation”

如果您需要App.js和index.js的代码 他们在这里:

App.js:

import React, { Component } from 'react';
import Header from './pages/Header';
import Footer from './pages/Footer';

import './css/App.css';

class App extends Component {
  render() {
    return (
      <div className="App">

        <Header />

            {/*Content*/}
            <div> App Page </div>

        <Footer />

      </div>
    );
  }
}

export default App;

index.js:

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

// CSS
import './css/index.css';

// Pages
import About from './pages/About';
import Register from './pages/Register';
import Cart from './pages/Cart';
import Thanks from './pages/Thanks';
import Faq from './pages/Faq';
import Contact from './pages/Contact';
import Error from './pages/Error';

ReactDOM.render((
  <Router history={History}>
    <Route path="/" component={App}>
        <Route path="/pages/about" component={About}/>
        <Route path="/pages/Register" component={Register}/>
        <Route path="/pages/Cart" component={Cart}/>
        <Route path="/pages/Thanks" component={Thanks}/>
        <Route path="/pages/Error" component={Error}/>
        <Route path="/pages/Faq" component={Faq}/>
        <Route path="/pages/Contact" component={Contact}/>
    </Route>
  </Router>
), document.getElementById('root'))

1 个答案:

答案 0 :(得分:1)

根据您的评论,您的历史记录对象未定义。请尝试导入browserHistory而不是History并将其传递到您的路由器。

在React-Router v4之前的

版本(我假设您正在使用,因为您要导入Router

import { Router, Route, browserHistory } from 'react-router';

...

....
<Router history={browserHistory}>
  <Route path="/" component={App}>

React-Router v4:

您可以导入Router,而不是导入browserHistory / browserRouterimport { BrowserRouter, Route } from 'react-router'; ... ... <BrowserRouter> <Route path="/" component={App}> 是一个创建自己的历史记录实例的路由器。它看起来像这样:

       public void postABeer(final int beerId, final Handler h) {

        new Thread (myThreadGroup, new Runnable () {

            @Override
            public void run() {

                BeerAdapter ba = new BeerAdapter();
                Beer newBeer = new Beer();
                newBeer = ba.createBeer("{\"ID\":\"973\", \"Name\":\"Beer\", \"Price\":\"4.99\", \"Comment\":\"bla\", \"LastModified\":\"196\"}");

                //Do background stuff here.
                String s = HttpHandler.HttpPostExec(MainActivity.baseURI
                        + "beer/" + beerId, newBeer.toString());

                //Start of artificial delay.Comment out if not wanted.
                try {
                    Thread.sleep(3000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                //End of artificial delay.

                Message m = new Message();
                m.obj = s;
                h.sendMessage(m);

            }//end run()

        }).start();

    }//end postABeer()

}//end BackGroundBinder class