Reactjs 单击链接时无法导航。获取错误“；TypeError:无法读取属性'；推动'；“未定义”的定义；

我正在尝试导航到不同的url，这将打开一个新组件。但每次我都会出错

我被这件事困扰了很长时间，任何帮助都将不胜感激

TypeError: Cannot read property 'push' of undefined

我有3个组件 Index.js，我在那里有这个代码

return (
      <BrowserRouter basename="/">
        <Switch>
          <Route path="/editable-table" component={EditableTable} />
        </Switch>
      </BrowserRouter>
    );

以及我应该出现的组件

---

EditableTable.js

类似的东西应该可以工作：

index.js

看来你在这里做的一切都是对的。但是我不知道JobseekerMain.js是否在

中。应该是

另外，您不需要使用

组件的

onClick

属性。你这样做有什么特别的原因吗

这里有一个有效的例子。看看这是不是你想要的

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Switch，Route，Link}；
函数App（）{
返回(

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Switch，Route，Link}；
从“@material ui/core/Link”导入LinkMUI；
函数App（）{
返回(
);
}
函数AllRoutes（）{
返回(
);
}
类JobSeekerMain扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
我是求职者
这是选项#1：将LinkMUI与react-router-dom-Link包装在一起
你好
);
}
}
函数可编辑表（props）{
函数handleClick（）{
props.history.push（“/”）；
}
返回(
我是一张可编辑的桌子
这是选项2：使用LinkMUI和onClick属性
求职者
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
如果您使用的是react router 4+，您是否从“react router”导入{withRouter}并将其包装在您的组件上？我正在从“react router dom”导入此导入{withRouter，browserHistory}；在JobSeekerMain.js中，我应该在哪个文件中导入它？您是否包装了它？我的意思是，如果您的组件名为JobSeekerMain，则应该有类似于withRouter（JobSeekerMain）的内容。您正在使用哪个版本的react router？正如消息所述，您无法访问它，因为您的JobSeekerMain组件不在路由器内。您只是将可编辑表传递给路由。您的JobSeekerMain应该有自己的路由，或者是已设置的某些路由的一部分（例如，beign是EditableTable组件的一部分）感谢您的回复我尝试了同样的方法，但现在什么也没有发生。我使用onClick访问函数``handleNavigationClick=e=>{//debugger；this.props.history.push（{pathname:“EditableTable”}）；console.log（“here”）；}“``如果你能检查这一点，这将是非常有帮助的，因为有很多代码需要检查。请用最少的功能做一个示例，只测试你遇到的问题。到目前为止，我可以告诉你，你没有正确地使用
链接
组件。你需要使用类似
的东西。你不需要使用
href
``可编辑示例``我必须从react router dom导入链接吗？当前是这样的。从“@material ui/core/Link”导入链接；
   <Link
              style={{ color: "#e73a9e" }}
              href="#"
              onClick={this.handleNavigationClick}
              aria-current="page"
            >
              Editable Example
            </Link>

//function to navigate to editable table
  handleNavigationClick = e => {
    // debugger;
    this.props.history.push({ pathname: "editable-table" });
    console.log("here");
  };

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <AllRoutes/>
    </BrowserRouter>
  );
}

function AllRoutes() {
  return (
    <Switch>
      <Route exact path='/' component={JobSeekerMain}/>
      <Route exact path='/editable' component={EditableTable}/>
    </Switch>

  );
}

class JobSeekerMain extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return(
      <React.Fragment>
        <div>I am JobSeekerMain</div>
        <Link to='/editable'>Editable Table</Link>
      </React.Fragment>
    );
  }

}

function EditableTable() {
  return(
    <React.Fragment>
      <div>I am Editable Table</div>
      <Link to='/'>JobSeekerMain</Link>
    </React.Fragment>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import LinkMUI from "@material-ui/core/Link";

function App() {
  return (
    <BrowserRouter>
      <AllRoutes />
    </BrowserRouter>
  );
}

function AllRoutes() {
  return (
    <Switch>
      <Route exact path="/" component={JobSeekerMain} />
      <Route exact path="/editable" component={EditableTable} />
    </Switch>
  );
}

class JobSeekerMain extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <React.Fragment>
        <div>I am JobSeekerMain</div>
        <div>This is option #1: wrap LinkMUI with react-router-dom Link </div>
        <Link to="/editable">
          <LinkMUI>Hi</LinkMUI>
        </Link>
      </React.Fragment>
    );
  }
}

function EditableTable(props) {
  function handleClick() {
    props.history.push("/");
  }

  return (
    <React.Fragment>
      <div>I am Editable Table</div>
      <div>This is option #2: use LinkMUI and the onClick attribute</div>
      <LinkMUI onClick={handleClick}>JobSeekerMain</LinkMUI>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);