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

Question

我写了这段代码：

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

Answer 1

将您的组件（您正在使用的组件props.location）包装起来以withRouter注入前者：

import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
...
}

export default withRouter(MyComponent);