无法读取未定义的属性（读取“位置”）

Posted 2023-02-22

【中文标题】无法读取未定义的属性（读取“位置”）

【英文标题】：Cannot read properties of undefined (reading 'location')

【发布时间】：2021-12-20 18:27:12

【问题描述】：

我写了这段代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import  BrowserRouter as Router, Route  from "react-router-dom";
import AboutPage from './pages/aboutPage'

ReactDOM.render(
  <React.StrictMode>
    <Router>
    <Route path='/' component= App />
    <Route path='/about' component= AboutPage />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

为什么它不起作用？我收到此错误：

我该如何解决？ React v17.0.2、React-router v5.2.1、React-router-dom v6.0.1

【问题讨论】：

向我们展示实际的Router.js

正如错误所说，错误来自“Router.js”文件，其中在尝试读取“位置”值时未定义属性“历史”值。

@k-wasilewski jsfiddle.net/mustmusk/kcpmxzaw

【参考方案1】：

Route 只能用作Routes 元素的子元素，从不直接渲染。因此，只需将您的 <Route> 包装在 <Routes> 中即可

<Router>
  <Routes>
    <Route path='/' component= App />
    <Route path='/about' component= AboutPage />
  </Routes>
</Router>

【讨论】：

做到了。没有结果。

路由器只是找不到当前位置，我不知道为什么以及如何解决它

你在同一个项目中使用“React router v5”和“react-router-dom v6”吗？！

【参考方案2】：

用withRouter 包裹您的组件（您使用props.location 的组件）以注入前者：

import  withRouter  from 'react-router-dom';

class MyComponent extends React.Component 
...


export default withRouter(MyComponent);

【讨论】：

"尝试导入错误：'withRouter' 未从 'react-router-dom' 导出。"