2017-04-01 6 views
4

Ich versuche, react-router-dom 4.0.0 Bibliothek zu verwenden. Aber es sendet mir diesen FehlerKann nicht lesen 'Eigenschaft' von undefined

Uncaught TypeError: Cannot read property 'location' of undefined

Es scheint, dass das Problem in browserHistore. Vorher habe ich react-router 2.x.x benutzt und alles war in Ordnung. Das ist mein index.js

import 'babel-polyfill' 
import React from 'react' 
import { Router, hashHistory } from 'react-router-dom' 
import { render } from 'react-dom' 
import { Provider } from 'react-redux' 
import { configureStore } from './store' 
import { routes } from './routes' 

const store = configureStore() 

render(
    <Provider store={store}> 
    <Router history={hashHistory} routes={routes} /> 
    </Provider>, 
    document.getElementById('root') 
) 

Diese meine Routen

ist
import React from 'react' 
import { IndexRoute, Route } from 'react-router-dom' 
import App from './containers/App' 
import Main from './containers/Main' 
import First from './containers/First' 

export const routes = (
    <Route path='/' component={Main}> 
    <Route path='/path' component={First} /> 
    <IndexRoute component={App} /> 
    </Route> 
) 

Und auch für Server-Seite drücke ich diese Konfiguration

app.get('*', function root(req, res) { 
    res.sendFile(__dirname + '/index.html'); 
}); 

Antwort

8

v4 Reagieren Router bekommen gesetzt ist ein komplettes Re -schreibt und ist nicht kompatibel mit früheren Versionen, wie Sie in Ihrem Code vermuten. Davon abgesehen, sollten Sie nicht erwarten, dass Sie einfach auf eine neue Hauptversion (V4) upgraden können und Ihre App wie gewohnt funktioniert. Sie sollten die documentation oder Downgrade zurück zu V2/3 überprüfen. Hier einige Code, sollten Sie in die richtige Richtung

import 'babel-polyfill' 
import React from 'react' 
import { BrowserRouter as Router, Route } from 'react-router-dom' 
import { render } from 'react-dom' 
import { Provider } from 'react-redux' 
import { configureStore } from './store' 
import App from './containers/App' 
import Main from './containers/Main' 
import First from './containers/First' 

const store = configureStore() 

render(
    <Provider store={store}> 
    <Router> 
     <Route path='/' component={Main} /> 
     <Route path='/path' component={First} /> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
) 
+0

Danke. Es hat mir geholfen. –

+0

Es hat mich davor bewahrt, eine Frage zu stellen. Danke vielmals. Aber es 'importieren {BrowserRouter als Router, Route} von 'reace-router-dom',' anders als 'import {Router als BrowserRouter, Route} von 'react-router-dom'' – Jeril

+0

@Jeril Fixed! Vielen Dank. –

1
  1. Überprüfen Sie die Version reagieren-Router-dom in package.json

  2. loszulegen Wenn seine Version größer als 4 dann in Ihrem Datei-Import BrowserRouter: -

    import { BrowserRouter as Router, Route } from 'react-router-dom' 
    

    sonst, wenn seine Version weniger als 4 dann Import Router: -

    import { Router, Route } from 'react-router-dom' 
    
Verwandte Themen