web-dev-qa-db-fra.com

Comment puis-je utiliser history.Push ('chemin') dans le routeur réactif 5.1.2 dans le composant avec état?

Comment puis-je utiliser history.Push ('chemin') dans le routeur React 5.1.2 dans un composant avec état (composant de classe)?

J'ai trouvé cela, mais c'est une solution pour le composant sans état

import { useHistory } from "react-router-dom";

function App() {
  let history = useHistory();
}

Merci :-) Adam

reactjsreact-routerreact-router-dom
3
Adam Gajdečka

C'est ainsi que vous pouvez naviguer vers un autre composant à l'aide de this.props.history.Push('/...') dans un composant avec état/basé sur une classe.

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);
const About = () => (
  <div>
    <h2>About</h2>
  </div>
);
class Home extends React.Component {
  handleClick = e => {
    this.props.history.Push("/about");
  };
  render() {
    return (
      <div>
        <h2>Home</h2>

        <button onClick={this.handleClick}>Click to navigate about page</button>
      </div>
    );
  }
}

Démo en direct

0
Vahid Akhtar

J'ai eu le même problème lors de l'utilisation de Reactor V5. Lorsque vous essayez de modifier l'itinéraire par programme ci-dessous,

this.props.history.Push({
    pathname: `/target-path`,
    state: variable_to_transfer
});

this.props.history était indéfini.

Voici ma solution pour réagir au routeur v5.

import React, { Component } from "react";
import { withRouter } from 'react-router-dom';

class MyClass extends Component {
    routingFunction = (param) => {
        this.props.history.Push({
            pathname: `/target-path`,
            state: param
        });
    }
    ...
}
export default withRouter(MyClass);

Voici article de référence . J'espère que cela vous aidera à économiser votre temps.

0
Tai JinYuan