Wie kann ich auf die aktuelle hash-Position reagieren auf router 2?

Möchte ich Zugriff auf den aktuellen Pfad (/home), ohne die Geschichte Schlüssel für einige Vergleich-Logik.

Wie kann ich es aus der hashHistory reagieren in router 2.

Auch, wie kann ich den letzten Weg?

  • Wollen Sie Lesen, hash-URL? Was window.location.hash?
  • wenn ich Lage.hash bekomme ich reagieren Schlüssel zusammen mit dem hash
InformationsquelleAutor Vivek Santhosh | 2016-03-07
  1. 5

    Erhalten Sie die aktuellen Pfadnamen von den location prop Ihrer route-Komponente.

    Lage Zugang von diesem.Requisiten.Speicherort der Ihre Route-Komponente. Wenn
    Sie mag würde, um es tiefer in den Baum, die Sie verwenden können, was auch immer
    Konventionen die app für immer Requisiten aus high down low. Ein
    option stellt es auf den Kontext selbst:

    //v2.0.x const RouteComponent = Reagieren.createClass({

    childContextTypes: {
    Lage: Reagieren.PropTypes.object },

    getChildContext() {
    return { Position: dies.Requisiten.Lage } } })

    Haben Sie einen Blick hier.

    Um den aktuellen Pfad können Sie einfach location.pathname.

    • können Sie geben einige details über das, was Sie erreichen wollen? Also, tun Sie zugreifen zu können, müssen diese außerhalb der route-Komponente? Mit location.pathname ist der offizielle Weg, um den Zugriff auf den Speicherort-Pfad, aber es sind in der Regel einige nicht unterstützte inoffizielle Möglichkeiten, hängt davon ab, was Sie tun möchten 🙂
    • ich brauche Zugriff auf den aktuellen Pfad weitergeleitet wird. wie localhost:9000/#/home. Ich will 'zu Hause' zu vergleichen. Das problem mit dem reagieren ist, die ich bekommen reagieren Schlüssel verwenden, wenn ich Position.hash und den Ort.Pfadname gibt mir / all die Zeit
    • Das ist seltsam. Es ist ziemlich schwierig herauszufinden, das problem ohne zu sehen den code. Ich erstellte ein kleines Beispiel auf codepen. MainLayout zugeordnet ist / und zeigt im inneren Kinder Home und UserList. UserList zugeordnet ist /users und zeigt Kind User im inneren. User zugeordnet ist /users/:id und hat keine Kinder. In der render-Methode der einzelnen Komponenten zeige ich die location.pathname aus Ihren Requisiten. Wie Sie sehen können, wenn die Navigation zu einem Kind auch die location.pathname seiner hosting-parent wird verändert.
    • Auch wenn Sie diese arbeiten, ich denke, es ist nicht genau das, was Sie wollen, weil pathname gibt den vollständigen Pfad, wo Sie sind wahrscheinlich daran interessiert, nur das Letzte bißchen, aber es ist ein Anfang 🙂 Hoffe es hilft dir weiter gehen, lassen Sie mich wissen, wenn Sie Fragen haben.
    InformationsquelleAutor Alex Chirițescu
  2. 3

    Einen Weg, um Zugriff auf Pfad über this.props.location von einem reagieren Komponente.

    import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, Link } from 'react-router'

class Child extends React.Component {
  render() {
    let location = this.props.location
    return (
      <div>
        <h1>Child Component</h1>
        <p>{location.pathname}</p>
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
            {this.props.children}
      </div>
    )
  }
}

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="child" component={Child} />
    </Route>
  </Router>
), document.getElementById('example'))

    Anderen Weise, wenn Sie wollen, hören Sie auf änderungen in der aktuellen Lage über Geschichte - 

    import { createHistory } from 'history'

let history = createHistory()

//Listen for changes to the current location. The
//listener is called once immediately.
let unlisten = history.listen(function (location) {
  console.log(location.pathname)
})

//When you're finished, stop the listener.
unlisten()
    InformationsquelleAutor WitVault
Schreibe einen Kommentar