javascript - ReactJS is not loadingrendering - Stack Overflow

admin管理员组

文章数量:1404583

Today when I started up the iMac to continue working on the ReactJS app...it doesn't load...

What I mean by "load" is, it doesn't display the content of any page.

Error:

Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined

If you need the code of App.js and index.js here they are:

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="/" ponent={App}>
        <Route path="/pages/about" ponent={About}/>
        <Route path="/pages/Register" ponent={Register}/>
        <Route path="/pages/Cart" ponent={Cart}/>
        <Route path="/pages/Thanks" ponent={Thanks}/>
        <Route path="/pages/Error" ponent={Error}/>
        <Route path="/pages/Faq" ponent={Faq}/>
        <Route path="/pages/Contact" ponent={Contact}/>
    </Route>
  </Router>
), document.getElementById('root'))

Today when I started up the iMac to continue working on the ReactJS app...it doesn't load...

What I mean by "load" is, it doesn't display the content of any page.

Error:

Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined

If you need the code of App.js and index.js here they are:

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="/" ponent={App}>
        <Route path="/pages/about" ponent={About}/>
        <Route path="/pages/Register" ponent={Register}/>
        <Route path="/pages/Cart" ponent={Cart}/>
        <Route path="/pages/Thanks" ponent={Thanks}/>
        <Route path="/pages/Error" ponent={Error}/>
        <Route path="/pages/Faq" ponent={Faq}/>
        <Route path="/pages/Contact" ponent={Contact}/>
    </Route>
  </Router>
), document.getElementById('root'))

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Mar 14, 2017 at 0:13 Yo Wakita 5,46033 gold badges2525 silver badges3636 bronze badges asked Mar 13, 2017 at 19:07 Abdulrahman MushrefAbdulrahman Mushref 1,00533 gold badges2222 silver badges4646 bronze badges 3

• console errors? – paqash Commented Mar 13, 2017 at 19:39
• imgur./a/wng0C – Abdulrahman Mushref Commented Mar 13, 2017 at 19:42
• I didn't have iMac, I have MacBook Pro... and then ? – Abdennour TOUMI Commented Mar 13, 2017 at 22:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

According to your ment, your history object is undefined. Please try importing browserHistory instead of History and pass that into your router.

versions before React-Router v4 (Which I am assuming you are using since you are importing Router:

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

...

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

React-Router v4:

Instead of importing Router/browserHistory, you import browserRouter, which is a router that creates it's own history instance. it would look like this:

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

...

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

本文标签： javascriptReactJS is not loadingrenderingStack Overflow