我在使用React Router时遇到了一些麻烦(我使用的是version ^ 4.0.0)。
这是我的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就是任何东西。我在这里发布基本的,因为这不是问题(我相信)
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;
这就是我检查控制台日志时发生的情况
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)
哦,这是package.json,以防万一
{ "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" } }
我已经在其他地方检查过,但是我没有找到解决方法。
非常感谢你们的耐心和帮助!!
您做错了几件事。
首先,browserHistory在V4中不是问题,因此您可以删除它。
其次,你想导入的一切react-router,它应该是react-router-dom。
react-router
react-router-dom
第三,react-router-dom不导出a Router,而是导出a ,BrowserRouter因此您需要import { BrowserRouter as Router } from 'react-router-dom。
Router
BrowserRouter
import { BrowserRouter as Router } from 'react-router-dom
看起来您刚刚拿了V3应用程序,并期望它可以与v4一起使用,但这并不是一个好主意。