无法阅读物业' location'未定义的

时间:2017-04-01 17:35:27

标签: javascript reactjs react-router

我尝试使用react-router-dom 4.0.0库。但它发给我这个错误

  

未捕获的TypeError:无法读取属性' location'未定义的

似乎是browserHistore中的问题。在我使用react-router 2.x.x之前,一切都没问题。 这是我的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')
)

这是我的路线

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>
  )

同样对于服务器端表达我设置了这个get配置

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

3 个答案:

答案 0 :(得分:13)

React Router v4是一个完整的重写,并且与您之前的版本不兼容,正如您在代码中所假设的那样。话虽如此,您不应期望能够升级到新的主要版本(V4)并让您的应用程序正常工作。您应该查看documentation或降级回V2 / 3。这里有一些代码可以让你从正确的方向开始

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')
)

答案 1 :(得分:5)

  1. Check the version of react-router-dom in package.json

  2. If its version is greater than 4 then in your file import BrowserRouter :-

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

    else if its version is less than 4 then import Router :-

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

答案 2 :(得分:0)

在您的终端安装上, npm我的历史记录@ 4.7.2 并像这样编辑您的index.js文件

InnoDB