web-dev-qa-db-ja.com

ステートフルコンポーネントの反応ルーター5.1.2でhistory.Push（ 'path'）を使用するにはどうすればよいですか？

ステートフルコンポーネント（クラスコンポーネント）の反応ルーター5.1.2でhistory.Push（ 'path'）をどのように使用できますか？

私はこれを見つけましたが、それはステートレスコンポーネントの解決策です

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

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

おかげで:-)アダム

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

これは、ステートフル/クラスベースのコンポーネントでthis.props.history.Push('/...')を使用して他のコンポーネントに移動する方法です。

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

ライブデモ

0
Vahid Akhtar

反応ルーターv5を使用するときにも同じ問題が発生しました。以下でプログラムでルートを変更しようとすると、

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

this.props.historyはundefinedでした。

これが反応ルーター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);

こちらが 参考記事 です。それがあなたの時間の節約に役立つことを願っています。

0
Tai JinYuan