Reactjs 未定义React this.context.router

在我的主页组件中，未定义this.context.router。我正在使用以下依赖项：

"@material-ui/core": "^3.9.3",
"@material-ui/icons": "^3.0.2",
"history": "^4.9.0",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"react-swipeable-views": "^0.13.1"

我的index.js是：

import React from 'react';
import ReactDOM from 'react-dom';
import {Switch, Router, Route, BrowserRouter } from 'react-router-dom';
import {MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import * as serviceWorker from './serviceWorker';
import UserApp from 'components/App.js';
ReactDOM.render((
                  <MuiThemeProvider theme={createMuiTheme({typography: { useNextVariants: true, },})}>
                    <BrowserRouter>
                      <Switch>
                          <Route path='/' component={UserApp} />                    
                      </Switch>   
                    </BrowserRouter>
                  </MuiThemeProvider>
                ), document.getElementById('root'));

serviceWorker.register();

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{Switch，Router，Route，BrowserRouter}；
从'@material ui/core/styles'导入{MuiThemeProvider，createMuiTheme}；
将*作为serviceWorker从“/serviceWorker”导入；
从“components/App.js”导入UserApp；
ReactDOM.render((
)，document.getElementById（'root'）；
register（）；

组件/App.js的内容包括：

import React, { Component } from 'react';
import Header from 'components/layout/Header.js';
import Footer from 'components/layout/Footer.js';
import Main from 'components/layout/Main.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      navOpen: false
    };
  }
  openLeftNav=()=>{}
  render() {
    return (
      <div className="site-app">
        <Header {...this.props} openLeftNav={this.openLeftNav} />
        <Main />
        <Footer />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“components/layout/Header.js”导入标题；
从“components/layout/Footer.js”导入页脚；
从“components/layout/Main.js”导入Main；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
navOpen:错误
};
}
openLeftNav=（）=>{}
render（）{
返回(
);
}
}
导出默认应用程序；

Main是我们的内部应用程序路由文件。Main.js的结构是：

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import HomePage from 'components/app/account/Home.js';

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={HomePage}/>
   </Switch>
  </main>
);   
export default Main;

从“React”导入React；
从“react router dom”导入{Switch，Route}；
从“components/app/account/Home.js”导入主页；
常量Main=（）=>(
);   
导出默认主；

我的Home.js文件是：

import React from 'react';
import PropTypes from 'prop-types';
import classNames from "classnames";
import withStyles from "@material-ui/core/styles/withStyles";
import landingPageStyle from "assets/jss/landingPage.jsx";

    class Home extends React.Component {
          constructor(props, context) {
                super(props, context);
                this.state = {
                      expanded: null,
                }
          }
          componentDidMount() {}
          testFunction=()=>{
               console.log(this.context);
               this.context.router.history.push('/test-page');
          }

       render() {
        return (
               <div>
                <Button color="primary" onClick={this.testFunction}>Click Me</Button>
              </div>

            )
         }
    }

    Home.contextTypes = {
          router: PropTypes.object.isRequired
    };
    export default withStyles(landingPageStyle)(Home);

从“React”导入React；
从“道具类型”导入道具类型；
从“类名”中导入类名；
从“@material ui/core/styles/withStyles”导入withStyles；
从“assets/jss/landingPage.jsx”导入landingPageStyle；
类Home扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
扩展：null，
}
}
componentDidMount（）{}
testFunction=（）=>{
log（this.context）；
this.context.router.history.push（'/testpage'）；
}
render（）{
返回(
点击我
)
}
}
Home.contextTypes={
路由器：PropTypes.object.isRequired
};
导出默认样式（landingPageStyle）（主页）；

我想有条件地使用this.context.route导航，有人能帮我解释一下为什么this.context.router未定义吗？

---

这段代码以前在react[v16.3]react router dom[v4.2.2]和material ui[v1.1.0]的早期版本中使用过，但现在它不起作用。

我也遇到过同样的情况，我开始使用react router dom提供的链接

import { Link } from 'react-router-dom';
import Button from '@material-ui/core/Button';

<Button component={Link} to="/test-page">
  About
</Button>

---

您需要将

withRouter

hoc包装到您的组件上，以访问历史道具-是否需要使用withRouter？我只是想知道它是如何工作在我以前的项目有相同的代码没有使用withRouter？我不知道你是如何在你的上一个项目，但据我所知，是的。另外，我也不知道上下文是从哪里来的。我以前的项目是相同的编码结构，只是版本不同——react[v16.3]react router dom[v4.2.2]和material ui[v1.1.0]。总之，我开始使用withRouter，它工作了。但我还是想知道原因，如果你将来有任何答案，那将帮助我肖恩·亚普。非常感谢。

...
import { withRouter } from 'react-router-dom';
class Home extends React.Component {
    testFunction=()=> this.props.history.push('/test-page');
    ...
}
export default withStyles(landingPageStyle)(withRouter(Home));