React Router v6 - React 17+ (2022 年 1 月 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 の間の大きな変更点の 1 つはuseNavigate、React フックが優先されるようになったことです。useHistory非推奨であり、推奨されません。
React Router v5 - React 16.8+ とフック
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 で推奨される方法は、render メソッドがリダイレクトをキャッチできるようにすることです。state または props を使用して、リダイレクト コンポーネントを表示する必要があるかどうかを判断します (これにより、リダイレクトがトリガーされます)。
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 - 参照ルーター コンテキスト
RouterReact コンポーネントに公開されている のコンテキストを利用することもできます。
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 と同様に常にルーターを再レンダリングする必要があります。これは、アクション関数からの 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 ルーター v2
browserHistoryインスタンスに新しい状態をプッシュします。
import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');
参照: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md