Javascript 无法读取属性';地点';未定义的

Javascript 无法读取属性';地点';未定义的,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我尝试使用react路由器dom4.0.0库。但它给了我这个错误 未捕获的TypeError:无法读取未定义的属性“位置” 这似乎是browserHistore中的问题。在我使用react router 2.x.x之前,一切都很好。 这是我的index.js import 'babel-polyfill' import React from 'react' import { Router, hashHistory } from 'react-router-dom' import { render

我尝试使用react路由器dom4.0.0库。但它给了我这个错误

未捕获的TypeError:无法读取未定义的属性“位置”

这似乎是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')
)

React Router v4是一个完整的重写,与您在代码中假设的以前版本不兼容。话虽如此,你不应该期望仅仅升级到一个新的主要版本(V4)并让你的应用程序正常工作。您应该查看或降级回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')
)
导入“babel polyfill”
从“React”导入React
从“react Router dom”导入{BrowserRouter as Router,Route}
从'react dom'导入{render}
从“react redux”导入{Provider}
从“/store”导入{configureStore}
从“./containers/App”导入应用程序
从“/containers/Main”导入Main
首先从“./containers/First”导入
const store=configureStore()
渲染(
,
document.getElementById('root'))
)
  • 检查package.json中react router dom的版本

  • 如果其版本大于4,则在文件导入浏览器路由器中:-

    import { BrowserRouter as Router, Route } from 'react-router-dom'
    
    import { Router, Route } from 'react-router-dom'
    
    否则,如果其版本小于4,则导入路由器:-

    import { Router, Route } from 'react-router-dom'
    
  • 安装:
    npm i历史记录

    然后在索引/路由文件中使用它,如下所示:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Router, Switch, Route} from 'react-router-dom';
    import createBrowserHistory from 'history/createBrowserHistory';
    import App from './components/App';
    import './index.css'
    
    const history = createBrowserHistory();
    
    ReactDOM.render(
        <Router history={history}>
            <Switch>
                <Route path='/' component={App}/>
            </Switch>
        </Router>,
         document.getElementById('root')
        );
    
    从“React”导入React;
    从“react dom”导入react dom;
    从“react Router dom”导入{Router,Switch,Route};
    从“历史记录/createBrowserHistory”导入createBrowserHistory;
    从“./components/App”导入应用程序;
    导入“./index.css”
    const history=createBrowserHistory();
    ReactDOM.render(
    ,
    document.getElementById('root'))
    );
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Router, Switch, Route} from 'react-router-dom';
    import createBrowserHistory from 'history/createBrowserHistory';
    import App from './components/App';
    import './index.css'
    
    const history = createBrowserHistory();
    
    ReactDOM.render(
        <Router history={history}>
            <Switch>
                <Route path='/' component={App}/>
            </Switch>
        </Router>,
         document.getElementById('root')
        );