【问题标题】:ReactJS is not loading/renderingReactJS 没有加载/渲染
【发布时间】:2017-03-13 19:07:56
【问题描述】:

今天当我启动 iMac 以继续在 ReactJS 应用程序上工作时...它没有加载...

我所说的“加载”是指,它不显示任何页面的内容。

错误:

未捕获的类型错误:无法读取未定义的属性“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'))

【问题讨论】:

  • 控制台错误?
  • 我没有 iMac,我有 MacBook Pro……然后呢?

标签: javascript reactjs react-router


【解决方案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,而是导入browserRouter,这是一个创建自己的历史实例的路由器。它看起来像这样:

import { BrowserRouter, Route } from 'react-router';
...

...

<BrowserRouter>
   <Route path="/" component={App}>

【讨论】:

    猜你喜欢
    • 2019-11-02
    • 1970-01-01
    • 2019-05-15
    • 2017-10-29
    • 1970-01-01
    • 2021-10-24
    • 2019-02-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多