react-routerページに戻る履歴をどのように設定しますか？

Question

特定のルートではなく前のページに戻る方法を誰かに教えてください。

このコードを使うとき：

var BackButton = React.createClass({

 mixins: [Router.Navigation],
  render: function() {
    return (
        <button
            className="button icon-left"
            onClick={this.navigateBack}>
            Back
        </button>
    );
  },

  navigateBack: function(){
    this.goBack();
  }
});

このエラーを取得します。goBack（）はルーター履歴がないため無視されました

これが私のルートです：

// Routing Components
Route = Router.Route;
RouteHandler = Router.RouteHandler;
DefaultRoute = Router.DefaultRoute;

var routes = (
 <Route name="app" path="/" handler={OurSchoolsApp}>
     <DefaultRoute name="home" handler={HomePage} />
     <Route name="add-school" handler={AddSchoolPage}  />
     <Route name="calendar" handler={CalendarPage}  />
     <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
     <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
     <Route name="info" handler={InfoPage} />
     <Route name="news" handler={NewsListPage} />
     <Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} />
     <Route name="contacts" handler={ContactPage} />
     <Route name="contact-detail" handler={ContactDetailPage} />
     <Route name="settings" handler={SettingsPage} />
 </Route>
 );

 Router.run(routes, function(Handler){
   var mountNode = document.getElementById('app');
   React.render(<Handler /> , mountNode);
 });

Answer 1

私はあなたがそれをそのように初期化することによってあなたのルーターのBrowserHistoryを有効にする必要があると思います：<Router history={new BrowserHistory}>。

その前に、'react-router/lib/BrowserHistory'からBrowserHistoryが必要です。

私はそれが役立つことを願っています！

更新：ES6の例

const BrowserHistory = require('react-router/lib/BrowserHistory').default;

const App = React.createClass({
    render: () => {
        return (
            <div><button onClick={BrowserHistory.goBack}>Go Back</button></div>
        );
    }
});

React.render((
    <Router history={BrowserHistory}>
        <Route path="/" component={App} />
    </Router>
), document.body);

Answer 2

React v16およびReactRouter v4.2.0（2017年10月）で更新します。

class BackButton extends Component {
  static contextTypes = {
    router: () => true, // replace with PropTypes.object if you use them
  }

  render() {
    return (
      <button
        className="button icon-left"
        onClick={this.context.router.history.goBack}>
          Back
      </button>
    )
  }
}

React v15およびReactRouter v3.0.0に更新します（2016年8月）：

var browserHistory = ReactRouter.browserHistory;

var BackButton = React.createClass({
  render: function() {
    return (
      <button
        className="button icon-left"
        onClick={browserHistory.goBack}>
        Back
      </button>
    );
  }
});

埋め込みiframeを使用した、もう少し複雑な例でフィドルを作成しました。 https://jsfiddle.net/kwg1da3a/

React v14とReacRouter v1.0.0（2015年9月10日）

あなたはこれを行うことができます：

var React = require("react");
var Router = require("react-router");

var SomePage = React.createClass({
  ...

  contextTypes: {
    router: React.PropTypes.func
  },
  ...

  handleClose: function () {
    if (Router.History.length > 1) {
      // this will take you back if there is history
      Router.History.back();
    } else {
      // this will take you to the parent route if there is no history,
      // but unfortunately also add it as a new route
      var currentRoutes = this.context.router.getCurrentRoutes();
      var routeName = currentRoutes[currentRoutes.length - 2].name;
      this.context.router.transitionTo(routeName);
    }
  },
  ...

戻るのに必要な歴史があることに注意する必要があります。ページに直接アクセスしてから再度ヒットすると、アプリの前にブラウザの履歴に戻ることができます。

この解決策は両方のシナリオに対応します。ただし、ページ内を移動できる（およびブラウザの履歴に追加できる）iframeは、戻るボタンで処理しません。率直に言って、私はそれがreact-routerのバグだと思います。ここで作成された問題： https://github.com/rackt/react-router/issues/1874

Answer 3

this.context.router.goBack()

ナビゲーションミックスインは不要です。

Answer 4

リアクタルーター、ステートレス機能を使用したmixinなしのES6メソッド。

import React from 'react'
import { browserHistory } from 'react-router'

export const Test = () => (
  <div className="">
    <button onClick={browserHistory.goBack}>Back</button>
  </div>
)

Answer 5

1. withRouterをインポート

   import { withRouter } from 'react-router-dom';
   

2. コンポーネントを次のようにエクスポートします。

   export withRouter(nameofcomponent) 
   

3. たとえば、ボタンをクリックしたときにgoBackを呼び出します。

   <button onClick={this.props.history.goBack}>Back</button>
   

react-router-dom v4.3でテスト済み

Answer 6

React-router v2.xではこれが変わりました。これが私がES6のためにやっていることです：

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { Router, RouterContext, Link, browserHistory } from 'react-router';

export default class Header extends React.Component {

  render() {
    return (
      <div id="header">
        <div className="header-left">
          {
            this.props.hasBackButton &&
            <FontAwesome name="angle-left" className="back-button" onClick={this.context.router.goBack} />
          }
        </div>
        <div>{this.props.title}</div>
      </div>
    )
  }
}

Header.contextTypes = {
  router: React.PropTypes.object
};

Header.defaultProps = {
  hasBackButton: true
};

Header.propTypes = {
  title: React.PropTypes.string
};

Answer 7

これは機能するBackButtonコンポーネントです（React 0.14）。

var React = require('react');
var Router = require('react-router');

var History = Router.History;

var BackButton = React.createClass({
  mixins: [ History ],
  render: function() {
    return (
      <button className="back" onClick={this.history.goBack}>{this.props.children}</button>
    );
  }
});

module.exports = BackButton;

履歴がない場合は、もちろんこのようなことをすることができます。

<button className="back" onClick={goBack}>{this.props.children}</button>

function goBack(e) {
  if (/* no history */) {
    e.preventDefault();
  } else {
    this.history.goBack();
  }
}

Answer 8

React-16 vとReact-router v4 Live Example を使った私の作業例をチェックしてください。コードをチェックアウトする Github

withRouterとhistory.goBack()を使う

これは私が実装しているアイデアです...

History.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import './App.css'


class History extends Component {

  handleBack = () => {
    this.props.history.goBack()
  }

  handleForward = () => {
    console.log(this.props.history)
    this.props.history.go(+1)
  }

  render() {
    return <div className="container">
      <div className="row d-flex justify-content-between">
        <span onClick={this.handleBack} className="d-flex justify-content-start button">
          <i className="fas fa-arrow-alt-circle-left fa-5x"></i>
        </span>
        <span onClick={this.handleForward} className="d-flex justify-content-end button">
          <i className="fas fa-arrow-alt-circle-right fa-5x"></i>
        </span>
      </div>
    </div>
  }
}

export default withRouter(History)

PageOne.js

import React, { Fragment, Component } from 'react'

class PageOne extends Component {

   componentDidMount(){
      if(this.props.location.state && this.props.location.state.from != '/pageone')
      this.props.history.Push({
         pathname: '/pageone',
         state: { 
             from: this.props.location.pathname
         }
       });
   }

   render() {
      return (
         <Fragment>
            <div className="container-fluid">
               <div className="row d-flex justify-content-center">
                  <h2>Page One</h2>
               </div>
            </div>
         </Fragment>
      )
   }
}

export default PageOne

pSすみませんが、ここにすべてを投稿するのは、コードが大きくてすみません。

Answer 9

this.props.history.goBack（）;

これはブラウザとハッシュの履歴で動作します。

Answer 10

React-router v4.xでは、history.go(-1)と同等のhistory.goBackを使用できます。

App.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const App = () => (
  <div style={styles}>
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />

        <Back />{/* <----- This is component that will render Back button */}
      </div>
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));

Back.js

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

const Back = ({ history }) => (
  <button onClick={history.goBack}>Back to previous page</button>
);

export default withRouter(Back);

デモ：https://codesandbox.io/s/ywmvp95wpj

history.goBack()はアプリケーションを開く前に訪問者が訪問したページをロードするため、historyを使用することでユーザーは退会できます。

---

上記のような状況を防ぐために、私はあなたのユーザーの最後の位置を監視する簡単なライブラリ react-router-last-location を作成しました。

使い方はとても簡単です。最初にnpmからreact-router-domとreact-router-last-locationをインストールする必要があります。

npm install react-router-dom react-router-last-location --save

次に、以下のようにLastLocationProviderを使用します。

App.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { LastLocationProvider } from "react-router-last-location";
//              ↑
//              |
//              |
//
//       Import provider
//
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const App = () => (
  <div style={styles}>
    <h5>Click on About to see your last location</h5>
    <Router>
      <LastLocationProvider>{/* <---- Put provider inside <Router> */}
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />

          <Back />
        </div>
      </LastLocationProvider>
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));

Back.js

import React from "react";
import { Link } from "react-router-dom";
import { withLastLocation } from "react-router-last-location";
//              ↑
//              |
//              |
//
//    `withLastLocation` higher order component
//    will pass `lastLocation` to your component               
//
//                   |
//                   |
//                   ↓
const Back = ({ lastLocation }) => (
  lastLocation && <Link to={lastLocation || '/'}>Back to previous page</Link>
);


//          Remember to wrap
//   your component before exporting
//
//                   |
//                   |
//                   ↓
export default withLastLocation(Back);

デモ：https://codesandbox.io/s/727nqm99jj

Answer 11

import { withRouter } from 'react-router-dom'

this.props.history.goBack();

私はこれらのバージョンを使っています

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

Answer 12

私にとってうまくいったのは私のファイルの一番上にwithRouterをインポートすることでした。

import { withRouter } from 'react-router-dom'

それからそれを使ってエクスポートされた関数を私のファイルの最後にラップします。

export default withRouter(WebSitePageTitleComponent)

それから私はルーターの歴史の小道具にアクセスすることができました。以下の完全なサンプルコード！

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

import PropTypes from 'prop-types'

class TestComponent extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    event.preventDefault()
    this.props.history.goBack()
  }

  render() {
    return (
      <div className="page-title">
        <a className="container" href="/location" onClick={this.handleClick}>
          <h1 className="page-header">
            { this.props.title }
          </h1>
        </a>
      </div>
    )
  }
}

const { string, object } = PropTypes

TestComponent.propTypes = {
  title: string.isRequired,
  history: object
}

export default withRouter(TestComponent)

Answer 13

以下のようにコンポーネントを呼び出します。

<BackButton history={this.props.history} />

そして、これがコンポーネントです。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class BackButton extends Component {
  constructor() {
    super(...arguments)

    this.goBack = this.goBack.bind(this)
  }

  render() {
    return (
      <button
        onClick={this.goBack}>
          Back
      </button>
    )
  }

  goBack() {
    this.props.history.goBack()
  }
}

BackButton.propTypes = {
  history: PropTypes.object,
}

export default BackButton

私が使っている：

"react": "15.6.1"
"react-router": "4.2.0"

Answer 14

REDUX

goBack()とPush()を持つreact-router-reduxを使うこともできます。

これがそのためのサンプラーパックです。

アプリのエントリポイントにはConnectedRouterが必要です。接続するのに巧妙な接続がhistoryオブジェクトです。 Reduxミドルウェアは履歴の変更を監視します。

import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import client from './components/apolloClient'
import store, { history } from './store'
import Routes from './Routes'
import './index.css'

render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Provider>
  </ApolloProvider>,
  document.getElementById('root'),
)

historyを接続する方法を紹介します。履歴がストアにインポートされ、シングルトンとしてエクスポートされてアプリのエントリポイントで使用できるようになることに注目してください。

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const { devToolsExtension } = window
  if (typeof devToolsExtension === 'function') {
    enhancers.Push(devToolsExtension())
  }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
const store = createStore(rootReducer, initialState, composedEnhancers)

export default store

上記の例のブロックは、セットアッププロセスを完了するreact-router-reduxミドルウェアヘルパーのロード方法を示しています。

この次の部分は完全に追加されていると思いますが、将来の誰かが恩恵を受ける場合に備えてそれを含めます。

import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'

export default combineReducers({
  routing, form,
})

私はいつもrouterReducerを使っていますが、通常はshouldComponentUpdateが原因ではないコンポーネントを強制的にリロードできます。明らかな例は、ユーザーがNavLinkボタンを押したときに更新されることになっているNav Barがある場合です。その道を進んでいくと、ReduxのconnectメソッドがshouldComponentUpdateを使っていることがわかります。 routerReducerでは、mapStateToPropsを使用してルーティングの変更をナビゲーションバーにマッピングできます。これにより、履歴オブジェクトが変更されたときにルーティングの変更が更新されます。

このような：

const mapStateToProps = ({ routing }) => ({ routing })

export default connect(mapStateToProps)(Nav)

私が人々のためにいくつかの追加のキーワードを追加している間私を許してください：あなたのコンポーネントが正しく更新されていないなら、connect関数を削除することによってshouldComponentUpdateを調べて問題が解決するかどうか確かめてください。もしそうなら、routerReducerを引き込むと、URLが変更されたときにコンポーネントは正しく更新されます。

最後に、これらすべてを行った後は、いつでもgoBack()またはPush()を呼び出すことができます。

ランダムな要素で試してみてください。

1. connect()にインポート
2. mapStateToPropsやmapDispatchToPropsも必要ありません
3. GoBackでインポートしてreact-router-reduxからプッシュする
4. this.props.dispatch(goBack())を呼び出す
5. this.props.dispatch(Push('/sandwich'))を呼び出す
6. 前向きな感情を体験する

もっとサンプリングが必要な場合は、チェックアウトしてください。 https://www.npmjs.com/package/react-router-redux

Answer 15

このコードはあなたのためにトリックをします。

this.context.router.history.goBack()

Answer 16

単にこんな風に使う

<span onClick={() => this.props.history.goBack()}>Back</span>