反应路由器 v ^ 4.0.0未捕获的 TypeError: 无法读取未定义的属性“ location”

我在使用反应路由器时遇到了一些麻烦(我使用的是版本 ^ 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)

哦，这是包裹 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"
}
}

我在其他地方查过了，但没找到解决的办法。

非常感谢你们的耐心和帮助! ！

159432 次浏览
小开
最佳答案

你做错了几件事。

  1. 首先，在 V4中没有 BrowserHistory，因此可以删除它。

  2. 第二，你从 react-router导入所有的东西，它应该是 react-router-dom。

  3. 第三，react-router-dom不导出 Router，而是导出 BrowserRouter，因此需要导出 import { BrowserRouter as Router } from 'react-router-dom。

看起来你只是把你的 V3应用程序，并期望它与 V4一起工作，这不是一个好主意。

小开

我已经尝试了所有建议在这里，但不适合我。因此，如果我可以帮助任何人与类似的问题，我检查的每一个教程都没有更新到版本4的工作。

这就是我为了让它运作所做的

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

这是唯一的方法，我已经设法使其工作没有任何错误或警告。

如果你想为我传递道具给你的组件，最简单的方法是这个:

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

替换

import { Router, Route, Link, browserHistory } from 'react-router';

和

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

会起作用的。 这是因为 response-router-dom 导出 BrowserRouter

小开

所以如果你需要使用这个代码)

import { useRoutes } from "./routes";


import { BrowserRouter as Router } from "react-router-dom";


export const App = () => {


const routes = useRoutes(true);


return (


<Router>


<div className="container">{routes}</div>


</Router>


);


};


// ./routes.js


import { Switch, Route, Redirect } from "react-router-dom";


export const useRoutes = (isAuthenticated) => {
if (isAuthenticated) {
return (
<Switch>
<Route path="/links" exact>
<LinksPage />
</Route>
<Route path="/create" exact>
<CreatePage />
</Route>
<Route path="/detail/:id">
<DetailPage />
</Route>
<Redirect path="/create" />
</Switch>
);
}
return (
<Switch>
<Route path={"/"} exact>
<AuthPage />
</Route>
<Redirect path={"/"} />
</Switch>
);
};
小开 
   appBar: {
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
backgroundColor: '#fff' // add the styles here
}

如果你已经有了 useStyles的应用程序栏，你可以添加你想要的样式。

小开

Location 来自 useLocation 钩子或者来自 useHistory 钩子正在从 response-router-dom 引用 BrowserRouter

所以只能从子组件调用 useLocation 和 useHistory，这样下面的代码就可以工作了

# src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter,Switch, Route, } from "react-router-dom";


ReactDOM.render(
<>
<BrowserRouter>
<Switch>
<Route>
<App />
<Route>
</Switch>
</BrowserRouter>
</>,
document.getElementById("root")
);

然后在 App.js 中，您可以通过 useLocation 钩子或 useHistory 获得位置

因为它是 BrowserRouter 的子节点，所以它将被定义为

例如 const { location} = useHistory(); 例如 const loction = useLocation();

小开

应该是的

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

确保它们按照这个顺序相互跟随。 不过我没问题


提交答案