反応ルーターを使用してプログラムでナビゲートする
react-routerを使えば、Link要素を使って、ネイティブにreactルーターによって扱われるリンクを作成することができます。
内部的にはthis.context.transitionTo(...)を呼び出しているのがわかります。
たとえばドロップダウン選択から、リンクからではなくナビゲーションを行いたいのです。これをコードで実行する方法を教えてください。 this.contextとは何ですか？
Navigationミックスインを見ましたが、ミックスインなしでこれを行うことができますか？
React Router v4
React Routerのv4では、コンポーネント内でプログラムによるルーティングを行うための3つのアプローチがあります。
withRouter高次コンポーネントを使用してください。- コンポジションを使用して
<Route>をレンダリングする contextを使用してください。
React Routerは主に history ライブラリのラッパーです。 historyは、ブラウザの履歴とハッシュ履歴を使って、ブラウザの window.history とのやり取りを処理します。グローバルな履歴を持たない環境に役立つメモリ履歴も提供します。これは、モバイルアプリ開発（react-native）およびNodeによる単体テストで特に役立ちます。
historyインスタンスは、ナビゲートするための2つのメソッド、Pushとreplaceを持ちます。 historyを訪問先の位置の配列と考えると、Pushは新しい位置を配列に追加し、replaceは配列内の現在の位置を新しい位置に置き換えます。通常は、ナビゲートするときにPushメソッドを使用します。
React Routerの以前のバージョンでは、あなたはあなた自身のhistoryインスタンスを作成しなければなりませんでした、しかしv4では<BrowserRouter>、<HashRouter>、および<MemoryRouter>コンポーネントはあなたのためにブラウザ、ハッシュとメモリインスタンスを作成します。 React Routerはあなたのルーターに関連するhistoryインスタンスのプロパティとメソッドをコンテキストを通してrouterオブジェクトの下で利用可能にします。
1. withRouter高次コンポーネントを使う
withRouter高次コンポーネントはhistoryオブジェクトをコンポーネントの支柱としてインジェクトします。これにより、Pushを処理することなく、replaceおよびcontextメソッドにアクセスできます。
import { withRouter } from 'react-router-dom'
// this also works with react-router-native
const Button = withRouter(({ history }) => (
<button
type='button'
onClick={() => { history.Push('/new-location') }}
>
Click Me!
</button>
))
2.コンポジションを使用して<Route>をレンダリングする
<Route>コンポーネントは、場所を一致させるためだけのものではありません。あなたはパスのないルートをレンダリングすることができ、それは常に現在位置と一致します。 <Route>コンポーネントはwithRouterと同じプロップを渡すので、あなたはhistoryプロップを通してhistoryメソッドにアクセスすることができます。
import { Route } from 'react-router-dom'
const Button = () => (
<Route render={({ history}) => (
<button
type='button'
onClick={() => { history.Push('/new-location') }}
>
Click Me!
</button>
)} />
)
3.文脈を使う*
しかし、あなたはおそらくそうすべきではありません
最後のオプションは、Reactの context モデルを使いこなすのに慣れている場合にだけ使うべきオプションです。 contextはオプションですが、contextは不安定なAPIであり、Reactのドキュメントには Contextを使用しない理由 というセクションがあります。だからあなた自身の責任で使ってください！
const Button = (props, context) => (
<button
type='button'
onClick={() => {
// context.history.Push === history.Push
context.history.Push('/new-location')
}}
>
Click Me!
</button>
)
// you need to specify the context type so that it
// is available within the component
Button.contextTypes = {
history: React.PropTypes.shape({
Push: React.PropTypes.func.isRequired
})
}
1と2が実装する最も簡単な選択なので、ほとんどのユースケースでは、それらがあなたの最善の策です。
React-Router 4.0.0以降 回答
4.0以降では、履歴をコンポーネントの支柱として使用してください。
class Example extends React.Component {
// use `this.props.history.Push('/some/path')` here
};
注：this.props.historyは、コンポーネントが<Route>によってレンダリングされなかった場合には存在しません。 YourComponentにthis.props.historyを含めるには<Route path="..." component={YourComponent}/>を使用する必要があります。
React-Router 3.0.0以降 回答
3.0以降では、ルータをコンポーネントの支柱として使用してください。
class Example extends React.Component {
// use `this.props.router.Push('/some/path')` here
};
React-Router 2.4.0以降 回答
2.4以降では、より高次のコンポーネントを使用して、ルータをコンポーネントの支柱として使用します。
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.Push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
Push: React.PropTypes.func.isRequired
}).isRequired
};
React-Router 2.0.0以降 答え
このバージョンは1.xと後方互換性があるので、アップグレードガイドは必要ありません。例を見ていくだけで十分です。
そうは言っても、もしあなたが新しいパターンに切り替えたいのであれば、あなたがアクセスできるルータの中にbrowserHistoryモジュールがあります。
import { browserHistory } from 'react-router'
ブラウザの履歴にアクセスできるようになったので、プッシュ、置換などの操作を実行できます。
browserHistory.Push('/some/path')
React-Router 1.x.x 答え
アップグレードの詳細については説明しません。これについては アップグレードガイド を参照してください。
ここでの質問に関する主な変更点は、ナビゲーションミックスインから履歴への変更です。現在はブラウザのhistoryAPIを使用してルートを変更しているので、今後はpushState()を使用します。
これがMixinの使用例です。
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
このHistoryは rackt/history projectから来ています。React-Router自体からではないことに注意してください。
何らかの理由で（おそらくES6クラスのために）Mixinを使用したくない場合は、this.props.historyからルーターから取得した履歴にアクセスできます。それはあなたのルーターによってレンダリングされたコンポーネントに対してのみアクセス可能になります。そのため、子コンポーネントでそれを使用したい場合は、propsを介して属性として渡す必要があります。
あなたは彼らの 1.0.x documentation で新しいリリースについてもっと読むことができます。
これが あなたのコンポーネントの外側へのナビゲートについてのヘルプページ です）
参照history = createHistory()をつかみ、その上でreplaceStateを呼び出すことをお勧めします。
React-Router 0.13.x 答え
私は同じ問題に遭遇し、反応ルーターに付属のナビゲーションミックスインで解決策を見つけることしかできませんでした。
これが私のやり方です
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
.contextにアクセスしなくてもtransitionTo()を呼び出すことができました
またはあなたは空想のES6を試すことができますclass
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
React-Router-Redux
注： Reduxを使用している場合は、 React-Router-Redux ）という別のプロジェクトがあります。これは、 React-Redux と同じ方法でReactRouterの還元バインディングを提供する）する
React-Router-Reduxには、アクション作成者の内部から簡単に移動できるようにするためのいくつかの方法があります。これらはReact Nativeに既存のアーキテクチャを持っていて、最小限の定型的なオーバーヘッドでReact Webで同じパターンを利用したい人にとって特に便利です。
以下の方法を調べてください。
Push(location)replace(location)go(number)goBack()goForward()
これが Redux-Thunk の場合の使用例です）
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>
React-Router v2
最新のリリース（v2.0.0-rc5）では、推奨されるナビゲーション方法は履歴シングルトンを直接プッシュすることです。 コンポーネントdocの外部への移動 で、その動作がわかります。
関連する抜粋：
import { browserHistory } from 'react-router';
browserHistory.Push('/some/path');
より新しいreact-router APIを使用している場合は、コンポーネントの内部でthis.propsのhistoryを使用する必要があります。
this.props.history.Push('/some/path');
それはpushStateも提供しますが、それはログに記録された警告ごとに非推奨です。
react-router-reduxを使用する場合、それはあなたがそのようにディスパッチすることができるPush関数を提供します：
import { Push } from 'react-router-redux';
this.props.dispatch(Push('/some/path'));
ただし、これはURLを変更するためにのみ使用され、実際にページに移動するために使用されることはありません。
これを react-router v2.0.0 と ES6 を使って行う方法は次のとおりです。 react-routerはmixinから離れました。
import React from 'react';
export default class MyComponent extends React.Component {
navigateToPage = () => {
this.context.router.Push('/my-route')
};
render() {
return (
<button onClick={this.navigateToPage}>Go!</button>
);
}
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
}
これに関しては、誰がサーバー側を制御しておらず、そのためハッシュルーターv2を使用しています。
history を別のファイル（app_history.js ES6など）に配置します。
import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });
export default appHistory;
そしてどこでもそれを使ってください！
React-router（app.js ES6）の入り口点：
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
<Router history={appHistory}>
...
</Router>
), document.querySelector('[data-role="app"]'));
任意のコンポーネント内のナビゲーション（ES6）：
import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
if (err) {
console.error(err); // login failed
} else {
// logged in
appHistory.replace('/dashboard'); // or .Push() if you don't need .replace()
}
})
React-Router 4.x回答：
私の最後には、外部コンポーネントでも持ち運べる単一の履歴オブジェクトが欲しいのです。私がやりたいのは、私がオンデマンドでインポートした単一のhistory.jsファイルを用意し、それを操作することです。
BrowserRouterをRouterに変更し、history propを指定するだけです。あなたが望むように操作できるあなた自身の履歴オブジェクトを持っていることを除いて、これはあなたにとって何も変わりません。
react-routerによって使用されるライブラリ history をインストールする必要があります。
使用例、ES6表記：
history.js
import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()
BasicComponent.js
import React, { Component } from 'react';
import history from './history';
class BasicComponent extends Component {
goToIndex(e){
e.preventDefault();
history.Push('/');
}
render(){
return <a href="#" onClick={this.goToIndex}>Previous</a>;
}
}
2018年4月16日編集：
Routeコンポーネントから実際にレンダリングされているコンポーネントから移動する必要がある場合は、次のように小道具から履歴にアクセスすることもできます。
BasicComponent.js
import React, { Component } from 'react';
class BasicComponent extends Component {
navigate(e){
e.preventDefault();
this.props.history.Push('/url');
}
render(){
return <a href="#" onClick={this.navigate}>Previous</a>;
}
}
警告： この回答はReactRouterバージョン1.0より前のものだけを網羅しています
私はこの答えを1.0.0-rc1のユースケースで更新します。
あなたもmixinなしでこれをすることができます。
let Authentication = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
コンテキストに関する問題は、クラスでcontextTypesを定義しない限りアクセスできないということです。
コンテキストとは、親から子に渡されるのは、小道具のようなオブジェクトですが、毎回小道具を再宣言する必要なく暗黙的に渡されるオブジェクトです。 https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html を参照してください。
React Router V4
tl：dr。
if (navigate) {
return <Redirect to="/" Push={true} />
}
単純で宣言的な答えは、setState()と組み合わせて<Redirect to={URL} Push={boolean} />を使用する必要があるということです
Push：boolean - trueの場合、リダイレクトすると現在のエントリを置き換えるのではなく、新しいエントリを履歴にプッシュします。
import { Redirect } from 'react-router'
class FooBar extends React.Component {
state = {
navigate: false
}
render() {
const { navigate } = this.state
// here is the important part
if (navigate) {
return <Redirect to="/" Push={true} />
}
// ^^^^^^^^^^^^^^^^^^^^^^^
return (
<div>
<button onClick={() => this.setState({ navigate: true })}>
Home
</button>
</div>
)
}
}
PS。この例では、状態を初期化するために ES7 + Property Initializers を使用しています。興味があれば、 here も参照してください。
何かがうまくいく前に、私はこれを行う少なくとも10の方法を試しました！
@Felipe SkinnerのwithRouterの答えは私には少々圧倒的でした、そして私は新しい "ExportedWithRouter"クラス名を作りたいかどうかわからなかったです。
現在のReact-Router 3.0.0とES6のまわりでこれをする最も簡単で最もきれいな方法は以下の通りです：
ES6とのReact-Router 3.x.x：
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.Push('/some/path')` here
};
// Export the decorated class
export default withRouter(Example);
または、デフォルトのクラスではない場合は、次のようにエクスポートします。
withRouter(Example);
export { Example };
3.x.xでは、<Link>コンポーネント自体がrouter.Pushを使用しているので、次のように<Link to=タグを渡すものなら何でも渡すことができます。
this.props.router.Push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'
プログラムでナビゲーションをするには、あなたのcomponentの中で history を props.history にプッシュする必要があります。
//using ES6
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
e.preventDefault()
/* Look at here, you can add it here */
this.props.history.Push('/redirected');
}
render() {
return (
<div>
<button onClick={this.handleClick}>
Redirect!!!
</button>
</div>
)
}
}
export default App;
以下の作業コードを見つけてください： この記事 で説明したように、react Routerを使ってナビゲートするのはとても簡単な方法です：
class Register extends React.Component {
state = {
toDashboard: false,
}
handleSubmit = (user) => {
saveUser(user)
.then(() => this.setState(() => ({
toDashboard: true
})))
}
render() {
if (this.state.toDashboard === true) {
return <Redirect to='/dashboard' />
}
return (
<div>
<h1>Register</h1>
<Form onSubmit={this.handleSubmit} />
</div>
)
}
}
< リダイレクト />は
作成可能✅宣言✅ユーザーイベント - >状態変更 - >再レンダリング✅
レジスタコンポーネントはReact Routerによってレンダリングされています。コードは次のようになります
class Register extends React.Component {
handleSubmit = (user) => {
saveUser(user).then(() =>
this.props.history.Push('/dashboard')
))
}
render() {
return (
<div>
<h1>Register</h1>
<Form onSubmit={this.handleSubmit} />
</div>
)
}
}
withRouterを追加すると、次のようになります
import {
withRouter
} from 'react-router-dom'
class Register extends React.Component {
handleSubmit = (user) => {
saveUser(user).then(() =>
this.props.history.Push('/dashboard')
))
}
render() {
return (
<div>
<h1>Register</h1>
<Form onSubmit={this.handleSubmit} />
</div>
)
}
}
export default withRouter(Register)
React Routerでプログラム的にナビゲートする方法は2つあります - とhistory.Push。どちらを使用するかは、主にあなたとあなたの特定のユースケース次第ですが、私はRedirectを支持しようとします。
ES6 + Reactコンポーネントの場合、次の解決策が役に立ちました。
私はFelippe skinnerをフォローしましたが、私のような初心者に役立つエンドツーエンドのソリューションを追加しました。
以下は私が使ったバージョンです。
"react-router"： "^ 2.7.0"
"反応"： "^ 15.3.1"
以下は、react-routerを使用したプログラムナビゲーションを使用した私のreactコンポーネントです。
import React from 'react';
class loginComp extends React.Component {
constructor( context) {
super(context);
this.state = {
uname: '',
pwd: ''
};
}
redirectToMainPage(){
this.context.router.replace('/home');
}
render(){
return <div>
// skipping html code
<button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
</div>;
}
};
loginComp.contextTypes = {
router: React.PropTypes.object.isRequired
}
module.exports = loginComp;
以下は私のルーターの設定です：
import { Router, Route, IndexRedirect, browserHistory } from 'react-router'
render(<Router history={browserHistory}>
<Route path='/' component={ParentComp}>
<IndexRedirect to = "/login"/>
<Route path='/login' component={LoginComp}/>
<Route path='/home' component={HomeComp}/>
<Route path='/repair' component={RepairJobComp} />
<Route path='/service' component={ServiceJobComp} />
</Route>
</Router>, document.getElementById('root'));
最善のアプローチではないかもしれませんが... ... react-router v4を使用して、次のTypeScriptは一部の人にアイデアを与えるでしょう。
以下のレンダリングされたコンポーネントでは、例えばLoginPage、routerオブジェクトはアクセス可能で、ナビゲートするにはrouter.transitionTo('/homepage')を呼び出すだけです。
ナビゲーションコードは https://react-router.now.sh/Match から取得しました。
"react-router": "^4.0.0-2","react": "^15.3.1",
import Router from 'react-router/BrowserRouter';
import { History } from 'react-history/BrowserHistory';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
interface MatchWithPropsInterface {
component: typeof React.Component,
router: Router,
history: History,
exactly?: any,
pattern: string
}
class MatchWithProps extends React.Component<MatchWithPropsInterface,any> {
render() {
return(
<Match {...this.props} render={(matchProps) => (
React.createElement(this.props.component, this.props)
)}
/>
)
}
}
ReactDOM.render(
<Router>
{({ router }) => (
<div>
<MatchWithProps exactly pattern="/" component={LoginPage} router={router} history={history} />
<MatchWithProps pattern="/login" component={LoginPage} router={router} history={history} />
<MatchWithProps pattern="/homepage" component={HomePage} router={router} history={history} />
<Miss component={NotFoundView} />
</div>
)}
</Router>,
document.getElementById('app')
);React-Router v4 および ES6
withRouterとthis.props.history.Pushを使うことができます。
import {withRouter} from 'react-router-dom';
class Home extends Component {
componentDidMount() {
this.props.history.Push('/redirect-to');
}
}
export default withRouter(Home);
クラスベースのコンポーネントでwithRouterを使うには、以下のようにしてください。 exportステートメントをwithRouterを使用するように変更することを忘れないでください。
import { withRouter } from 'react-router-dom'
class YourClass extends React.Component {
yourFunction = () => {
doSomeAsyncAction(() =>
this.props.history.Push('/other_location')
)
}
render() {
return (
<div>
<Form onSubmit={ this.yourFunction } />
</div>
)
}
}
export default withRouter(YourClass);
前回の回答に基づく
JoséAntonio PostigoとBen Wheelerによる
ノベルティ？ TypeScript で書かれることになっています
および デコレータの使用
OR static property/field
import * as React from "react";
import Component = React.Component;
import { withRouter } from "react-router";
export interface INavigatorProps {
router?: ReactRouter.History.History;
}
/**
* Note: goes great with mobx
* @inject("something") @withRouter @observer
*/
@withRouter
export class Navigator extends Component<INavigatorProps, {}>{
navigate: (to: string) => void;
constructor(props: INavigatorProps) {
super(props);
let self = this;
this.navigate = (to) => self.props.router.Push(to);
}
render() {
return (
<ul>
<li onClick={() => this.navigate("/home")}>
Home
</li>
<li onClick={() => this.navigate("/about")}>
About
</li>
</ul>
)
}
}
/**
* Non decorated
*/
export class Navigator2 extends Component<INavigatorProps, {}> {
static contextTypes = {
router: React.PropTypes.object.isRequired,
};
navigate: (to: string) => void;
constructor(props: INavigatorProps, context: any) {
super(props, context);
let s = this;
this.navigate = (to) =>
s.context.router.Push(to);
}
render() {
return (
<ul>
<li onClick={() => this.navigate("/home")}>
Home
</li>
<li onClick={() => this.navigate("/about")}>
About
</li>
</ul>
)
}
}
今日インストールされているものは何でも。 "react-router"： "^ 3.0.0"と
"@ types/react-router"： "^ 2.0.41"
react-Router v4が登場した今、これを行う新しい方法があります。
import { MemoryRouter, BrowserRouter } from 'react-router';
const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;
<Router location="/page-to-go-to"/>
react-lego は、 react-routerの使用方法/更新方法 を示すサンプルアプリで、アプリケーションをナビゲートする機能テストの例が含まれています。
反応ルータv4で。私はプログラムでルーティングするためにこの2つの方法に従います。
1. this.props.history.Push("/something/something")
2. this.props.history.replace("/something/something")
ナンバー2
履歴スタックの現在のエントリを置き換えます
小道具で歴史をつかむには、コンポーネントを次のようにラップする必要があります。
withRouter https://reacttraining.com/react-router/core/api/withRouter
ハッシュやブラウザの履歴を使っているのなら、
hashHistory.Push('/login');
browserHistory.Push('/login');
現在のReactバージョン（15.3）では、this.props.history.Push('/location');は私のために働きました、しかし、それは以下の警告を示しました：
browser.js：49警告：[react-router]
props.historyおよびcontext.historyは非推奨です。context.routerを使用してください。
そして私はこのようにcontext.routerを使ってそれを解決しました：
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.backPressed = this.backPressed.bind(this);
}
backPressed() {
this.context.router.Push('/back-location');
}
...
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default MyComponent;
React-router v4でこれを実装する際に問題に直面している人。
これはreduxアクションから反応アプリをナビゲートするための実用的な解決策です。
history.js
import createHistory from 'history/createBrowserHistory'
export default createHistory()
App.js/Route.jsx
import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
<Route path="/test" component={Test}/>
</Router>
another_file.js OR reduxファイル
import history from './history'
history.Push('/test') // this should change the url and re-render Test component
このコメントのおかげで： ReactTrainingの問題のコメント
React-Router V4
バージョン4を使用しているのであれば、アクションをディスパッチするだけですべてがうまくいく私のライブラリ（Shameless plug）を使用できます。
dispatch(navigateTo("/aboutUs"));
RR4と react-router-redux のペアでRR4をペアリングする場合は、react-router-reduxのルーティングアクション作成者を使用することもできます。
import { Push, replace, ... } from 'react-router-redux'
class WrappedComponent extends React.Component {
handleRedirect(url, replaceState = true) {
replaceState
? this.props.dispatch(replace(url))
: this.props.dispatch(Push(url))
}
render() { ... }
}
export default connect(null)(WrappedComponent)
Redux thunk/sagaを使用して非同期フローを管理する場合は、上記のアクション作成者をreduxアクションにインポートし、mapDispatchToPropsを使用してコンポーネントを反応させるためのフックを設定したほうがよい場合があります。
最善の解決策ではないかもしれませんが、それは仕事を完成させます。
import { Link } from 'react-router-dom';
// create functional component Post
export default Post = () => (
<div className="component post">
<button className="button delete-post" onClick={() => {
// ... delete post
// then redirect, without page reload, by triggering a hidden Link
document.querySelector('.trigger.go-home').click();
}}>Delete Post</button>
<Link to="/" className="trigger go-home hidden"></Link>
</div>
);
基本的に、1つのアクション（この場合は削除後）に関連付けられているロジックは、リダイレクトのトリガーを呼び出します。必要なときに都合よく呼び出すことができるようにDOMノード「trigger」をマークアップに追加するので、これは理想的ではありません。また、あなたはDOMと直接対話するでしょう、それはReactコンポーネントでは望まれないかもしれません。
それでも、このタイプのリダイレクトはそれほど頻繁には必要ありません。そのため、コンポーネントマークアップに1つか2つの余分な隠されたリンクがあっても、特に意味のある名前を付けてもそれほど問題はありません。
執筆時点で正しい答えは私にありました
this.context.router.history.Push('/');
しかし、あなたはあなたのコンポーネントにPropTypeを追加する必要があります。
Header.contextTypes = {
router: PropTypes.object.isRequired
}
export default Header;
PropTypeをインポートすることを忘れないでください
import PropTypes from 'prop-types';
これは私のために働いた、特別なインポートは必要ありません：
<input type="button" name="back" id="back" class="btn btn-primary" value="Back" onClick={() => { this.props.history.goBack() }} />
React Router v4 +の場合
最初のレンダリング中にナビゲートする必要がない（<Redirect>コンポーネントを使用できる）と仮定すると、これが私たちのアプリで行っていることです。
Nullを返す空の経路を定義します。これにより、履歴オブジェクトにアクセスできるようになります。あなたはあなたのRouterが定義されているトップレベルでこれをする必要があります。
history.Push()、history.replace()、history.go(-1)などのように、 history に対して実行できるすべてのことができるようになりました。
import React from 'react';
import { HashRouter, Route } from 'react-router-dom';
let routeHistory = null;
export function navigateTo(path) {
if(routeHistory !== null) {
routeHistory.Push(path);
}
}
export default function App(props) {
return (
<HashRouter hashType="noslash">
<Route
render={({ history }) => {
routeHistory = history;
return null;
}}
/>
{/* Rest of the App */}
</HashRouter>
);
}