質問

私はReactJSとReact-Routerの初心者です。私は、プロップスを通して <Link/> オブジェクトを作成します。 リアクトルーター . ユーザーがこのコンポーネント内の「次へ」ボタンをクリックすると、必ず <Link/> オブジェクトを手動で作成します。

今、私は レフ にアクセスするために バッキングインスタンス という 'a' タグを手動でクリックします。 <Link/> が生成します。

質問です。 手動でLinkを呼び出す方法はありますか（例． this.props.next.go )?

これは、私が現在持っているコードです。

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   _onClickNext: function() {
      var next = this.refs.next.getDOMNode();
      next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
   },
   render: function() {
      return (
         ...
         <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
         ...
      );
   }
});
...

これは私が欲しいコードです。

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
         ...
      );
   }
});
...

解決方法は？

React Router v6 - React 17+ (2022/01/14更新)

import React, {useCallback} from 'react';
import {useNavigate} from 'react-router-dom';

export default function StackOverflowExample() {
  const navigate = useNavigate();
  const handleOnClick = useCallback(() => navigate('/sample', {replace: true}), [navigate]);

  return (
    <button type="button" onClick={handleOnClick}>
      Go home
    </button>
  );
}

注：この回答では、v6とv5の間の大きな変更点として useNavigate がReactフックとして推奨されるようになりました。 useHistory は非推奨です。

React Router v5 - React 16.8+とHooksについて

を利用している場合 React Hooks を利用することができます。 useHistory React Router v5から搭載されたAPIです。

import React, {useCallback} from 'react';
import {useHistory} from 'react-router-dom';

export default function StackOverflowExample() {
  const history = useHistory();
  const handleOnClick = useCallback(() => history.push('/sample'), [history]);

  return (
    <button type="button" onClick={handleOnClick}>
      Go home
    </button>
  );
}

を使いたくない場合の別の書き方として、クリックハンドラには useCallback

const handleOnClick = () => history.push('/sample');

React Router v4 - リダイレクトコンポーネント

v4で推奨されている方法は、レンダーメソッドでリダイレクトをキャッチできるようにすることです。リダイレクトコンポーネントを表示する必要があるかどうかを判断するには、ステートまたはプロパティを使用します（これにより、リダイレクトがトリガーされます）。

import { Redirect } from 'react-router';

// ... your class implementation

handleOnClick = () => {
  // some action...
  // then redirect
  this.setState({redirect: true});
}

render() {
  if (this.state.redirect) {
    return <Redirect push to="/sample" />;
  }

  return <button onClick={this.handleOnClick} type="button">Button</button>;
}

参考 https://reacttraining.com/react-router/web/api/Redirect

React Router v4 - 参照ルータコンテキスト

を活用することもできます。 Router のコンテキストは、React コンポーネントに公開されています。

static contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
      replace: PropTypes.func.isRequired
    }).isRequired,
    staticContext: PropTypes.object
  }).isRequired
};

handleOnClick = () => {
  this.context.router.push('/sample');
}

このように <Redirect /> は、ボンネットの下で動作します。

参考にしてください。 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

React Router v4 - 外部からヒストリーオブジェクトを変異させる

それでもv2の実装と似たようなことをする必要がある場合は、コピーした BrowserRouter を公開し history をエクスポート可能な定数として使用します。以下は基本的な例ですが、必要に応じてカスタマイズ可能なプロップを注入するために合成することができます。ライフサイクルに関する注意点がありますが、v2のように常にRouterを再レンダリングする必要があります。 これは、アクション関数からのAPIリクエストの後のリダイレクトに便利です。

// browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';

export const history = createHistory();

export default class BrowserRouter extends Component {
  render() {
    return <Router history={history} children={this.props.children} />
  }
}

// your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';

render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
);

// some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';

history.push('/sample');

最新の BrowserRouter を拡張する。 https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

に新しい状態をプッシュします。 browserHistory インスタンスを作成します。

import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');

参考 https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md