webentwicklung-frage-antwort-db.com.de

der Reakt-Router geht eine Seite zurück, wie wird der Verlauf konfiguriert?

Kann mir jemand bitte sagen, wie ich zur vorherigen Seite und nicht zu einer bestimmten Route zurückkehren kann?

Bei Verwendung dieses Codes:

var BackButton = React.createClass({

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

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

Diesen Fehler erhalten, goBack () wurde ignoriert, da kein Router-Verlauf vorhanden ist

Hier sind meine Routen:

// 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);
 });
74
Bomber

Ich denke, Sie müssen BrowserHistory nur auf Ihrem Router aktivieren, indem Sie es folgendermaßen initialisieren: <Router history={new BrowserHistory}>.

Vorher sollten Sie BrowserHistory von 'react-router/lib/BrowserHistory' benötigen.

Ich hoffe das hilft !

UPDATE: Beispiel in 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);
27
Ghislaindj

Update mit React v16 und ReactRouter v4.2.0 (Oktober 2017):

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

Update mit React v15 und ReactRouter v3.0.0 (August 2016):

var browserHistory = ReactRouter.browserHistory;

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

Eine Geige mit einem etwas komplexeren Beispiel mit einem eingebetteten Iframe erstellt: https://jsfiddle.net/kwg1da3a/

React v14 und ReacRouter v1.0.0 (10. September 2015)

Du kannst das:

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

Sie müssen darauf achten, dass Sie über die notwendige Geschichte verfügen, um zurückgehen zu können. Wenn Sie direkt auf die Seite klicken und dann zurückgehen, gelangen Sie zurück in den Browserverlauf vor Ihrer App.

Diese Lösung berücksichtigt beide Szenarien. Es behandelt jedoch keinen iframe, der mit der Zurück-Taste innerhalb der Seite navigieren kann (und zum Browserverlauf hinzugefügt werden kann). Ehrlich gesagt denke ich, dass dies ein Fehler im Reakt-Router ist. Hier erstelltes Problem: https://github.com/rackt/react-router/issues/1874

70
mlunoe
this.context.router.goBack()

Kein Navigations-Mix erforderlich!

ES6-Methode ohne Mixins mit Reakt-Router, zustandslose Funktion.

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

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

    import { withRouter } from 'react-router-dom';
    
  2. Exportieren Sie Ihre Komponente als:

    export withRouter(nameofcomponent) 
    
  3. Beispiel: Klicken Sie beim Klicken auf die Schaltfläche goBack:

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

Getestet am react-router-dom v4.3

20
gaurav makwana

Für den Reakt-Router v2.x hat sich dies geändert. Folgendes mache ich für 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
};
6
aceofspades

Dies ist eine funktionierende BackButton-Komponente (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;

Sie können natürlich so etwas tun, wenn es keine Geschichte gibt:

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

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

Schauen Sie sich mein Funktionsbeispiel mit React 16.0 mit React-Router v4 Live Example an. Check den Code Github 

Verwenden Sie withRouter und history.goBack()

Dies ist die Idee, die ich umsetze ...

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

p.s. Entschuldigung, der Code ist zu groß, um alles hier zu posten

5
Morris S

this.props.history.goBack ();

Dies funktioniert mit der Browser- und Hash-Historie.

3
user3322876

In Reakt-Router v4.x können Sie history.goBack verwenden, was äquivalent zu history.go(-1) ist.

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

Demo:https://codesandbox.io/s/ywmvp95wpj

Bitte denken Sie daran, dass Ihre Benutzer mit history das Menü verlassen können, da history.goBack() eine Seite laden kann, die der Besucher besucht hat, bevor Sie Ihre Anwendung öffnen.


Um die oben beschriebene Situation zu vermeiden, habe ich eine einfache Bibliothek Reaktiver-Router-Letzter-Standort erstellt, die den letzten Standort Ihrer Benutzer überwacht.

Die Verwendung ist sehr einfach. Zuerst müssen Sie react-router-dom und react-router-last-location von npm installieren.

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

Dann verwenden Sie LastLocationProvider wie folgt:

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

Demo: _ ​​ https://codesandbox.io/s/727nqm99jj

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

this.props.history.goBack();

Ich verwende diese Versionen 

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

Was für mich funktionierte, war, mitRouter oben in meiner Datei zu importieren.

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

Dann verwenden Sie es, um die exportierte Funktion am Ende meiner Datei einzuhüllen.

export default withRouter(SymptomsViewerPageTitleComponent)

Dadurch konnte ich auf die Verlaufsstütze des Routers zugreifen. Voller Beispielcode unten!

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)
1
vancy.pants

Rufen Sie die folgende Komponente so auf:

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

Und hier ist die Komponente:

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

Ich benutze:

"react": "15.6.1"
"react-router": "4.2.0"
1
Gal Bracha

REDUX

Sie können auch react-router-redux verwenden, der goBack() und Push() hat.

Hier ist ein Sampler-Pack dafür:

Im Einstiegspunkt Ihrer App benötigen Sie ConnectedRouter und eine manchmal schwierige Verbindung, um eine Verbindung herzustellen, ist das history-Objekt. Die Redux-Middleware hört auf historische Änderungen:

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'),
)

Ich zeige Ihnen eine Möglichkeit, die history anzuschließen. Beachten Sie, wie der Verlauf in den Store importiert und auch als Singleton exportiert wird, damit er im Einstiegspunkt der App verwendet werden kann:

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

Der obige Beispielblock zeigt, wie die react-router-redux-Middleware-Helfer geladen werden, die den Installationsvorgang abschließen.

Ich denke, dass der nächste Teil etwas Besonderes ist, aber ich werde es nur für den Fall hinzufügen, dass jemand in der Zukunft von Vorteil ist:

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

export default combineReducers({
  routing, form,
})

Ich verwende ständig routerReducer, weil ich damit das Neuladen von Komponenten erzwingen kann, die normalerweise nicht durch shouldComponentUpdate bedingt sind. Das offensichtliche Beispiel ist, wenn Sie eine Navigationsleiste haben, die aktualisiert werden soll, wenn ein Benutzer eine NavLink-Taste drückt. Wenn Sie diesen Weg einschlagen, werden Sie erfahren, dass die Verbindungsmethode von Redux shouldComponentUpdate verwendet. Mit routerReducer können Sie mapStateToProps verwenden, um Routing-Änderungen der Navigationsleiste zuzuordnen. Dadurch wird die Aktualisierung ausgelöst, wenn sich das Verlaufsobjekt ändert.

So was:

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

export default connect(mapStateToProps)(Nav)

Verzeihen Sie mir, während ich einige zusätzliche Schlüsselwörter für Benutzer hinzufüge: Wenn Ihre Komponente nicht ordnungsgemäß aktualisiert wird, untersuchen Sie shouldComponentUpdate, indem Sie die Verbindungsfunktion entfernen und prüfen, ob das Problem behoben ist. Wenn ja, ziehen Sie die Variable routerReducer ein, und die Komponente wird ordnungsgemäß aktualisiert, wenn sich die URL ändert.

Zum Schluss können Sie, nachdem Sie all dies getan haben, goBack() oder Push() jederzeit aufrufen!

Versuchen Sie es jetzt in einer zufälligen Komponente:

  1. Importieren in connect()
  2. Sie brauchen nicht einmal mapStateToProps oder mapDispatchToProps
  3. Import in goBack und Push aus react-router-redux
  4. Aufruf this.props.dispatch(goBack())
  5. Aufruf this.props.dispatch(Push('/sandwich'))
  6. Erleben Sie positive Emotionen

Wenn Sie mehr Proben benötigen, besuchen Sie die folgenden Informationen: https://www.npmjs.com/package/react-router-redux

0
agm1984

Dieses Stück Code wird den Trick für Sie tun. 

this.context.router.history.goBack()
0
prajeesh

Verwenden Sie einfach so

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