Impossible de naviguer en cliquant sur un lien. J'obtiens l'erreur "TypeError : Impossible de lire la propriété 'push' d'undefined"

Question

J'essaie de naviguer vers une url différente qui ouvrira un nouveau composant. Mais à chaque fois, j'obtiens une erreur

Je suis bloqué depuis longtemps, toute aide sera appréciée.

TypeError: Cannot read property 'push' of undefined

J'ai 3 composants Index.js où j'ai ce code

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

JobseekerMain.js où la fonction onClick est écrite

   <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");
  };

et ma Composante qui devrait apparaître EditableTable.js

Answer 1

Une solution de ce type devrait fonctionner :

index.js

Il semble que vous fassiez tout correctement ici. Mais je ne sais pas si JobseekerMain.js se trouve à l'intérieur du <BrowserRouter> . Il devrait l'être.

De même, il n'est pas nécessaire d'utiliser la fonction onClick de la propriété <Link> de la composante. Faites-vous cela pour une raison particulière ?

Voici un exemple concret. Voyez si c'est ce que vous recherchez.

https://codesandbox.io/s/nameless-grass-bufkj

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

UPDATE :

Voici comment vous pouvez utiliser le lien de Material-UI avec le lien de react-router-dom.

https://codesandbox.io/s/small-field-fqor1

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