Reakcja routera v^4.0.0 Uncaught TypeError: Nie można odczytać właściwości 'location' z undefined

Question

Mam problemy z reagowaniem na router (używam wersji^4.0.0).

to moje index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 
import { Router, Route, Link, browserHistory } from 'react-router'; 


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

    </Router>, 
    document.getElementById('root') 
); 

App.js jest po prostu nic. Jestem delegowania podstawową je tutaj, bo to nie jest problem (wierzę)

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App; 

i to jest, gdy sprawdzasz dzienniku konsolę

Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined 
    at new Router (Router.js:43) 
    at ReactCompositeComponent.js:295 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294) 
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188) 
    at Object.mountComponent (ReactReconciler.js:46) 
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 
    at Object.mountComponent (ReactReconciler.js:46) 

oh, co się dzieje, a to jest pakiet .json właśnie w przypadku

{ 
    "name": "teste2", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^4.0.0" 
    }, 
    "devDependencies": { 
    "react-scripts": "0.9.5" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

Sprawdzałem to w innych miejscach, ale nie znalazłem sposobu, aby to rozwiązać.

Bardzo dziękuję za cierpliwość i pomoc!

Answer 1

Robisz kilka błędów. Po pierwsze, browserHistory nie jest rzeczą w V4, więc możesz ją usunąć. Po drugie, importujesz wszystko od react-router, powinno to być react-router-dom. Po trzecie, react-router-dom nie eksportuje Router, zamiast tego eksportuje BrowserRouter, więc musisz import { BrowserRouter as Router } from 'react-router-dom. Wygląda na to, że właśnie wziąłeś aplikację V3 i spodziewałeś się, że będzie działać z wersją 4, co nie jest świetnym pomysłem.

Answer 2

Próbowałem wszystkiego, co tutaj sugerowałem, ale nie działało dla mnie. Tak więc w przypadku mogę pomóc każdemu z podobnego problemu, każdy poradnik Sprawdziłem nie został zaktualizowany do pracy z wersją 4.

Oto co zrobiłem, aby to działało

import React from 'react'; 
import App from './App'; 

import ReactDOM from 'react-dom'; 
import { 
    HashRouter, 
    Route 
} from 'react-router-dom'; 


ReactDOM.render((
     <HashRouter> 
      <div> 
       <Route path="/" render={()=><App items={temasArray}/>}/> 
      </div> 
     </HashRouter > 
    ), document.getElementById('root')); 

To jedyny sposób, w jaki udało mi się sprawić, żeby działało bez błędów i ostrzeżeń.

W przypadku, gdy chcesz przejść rekwizyty do komponentu dla mnie Najłatwiej jest to jedno:

<Route path="/" render={()=><App items={temasArray}/>}/>