wake-up-neo.com

reagiere den Router this.props.location

Ich brauche eine Hilfe mit dem reaktiver Router v2 + Ich muss die Navbar-Klasse ändern, wenn die Route geändert wird Zum Beispiel für route /profile className wird "profile-header" Ich habe versucht, this.props.location in der Navbar-Komponente zu verwenden, aber es zeigt undefined

Hoffe deine Hilfe 

javascriptreactjsreact-router
12
Андрей Гузюк

Ihre navbar-Komponente (wie Sie sie in Ihrer Frage beschrieben haben) ist wahrscheinlich nicht die Routenkomponente, richtig? Mit route component meine ich diejenige, die Sie in Ihrer react-router-Konfiguration verwenden, die für eine bestimmte Route geladen wird.

this.props.location ist nur für diesen route component zugänglich, daher müssen Sie ihn an Ihre navbar übergeben.

Nehmen wir ein Beispiel:

Ihre Router-Konfiguration:

<Router>
    <Route path="/" component={App}>
    // ...
</Router

Routenkomponente App:

class App extends React.Component{
  // ...
  render() {
    return <Navbar location={this.props.location}/>
  }
}
21
szymonm

Es kann vorkommen, dass Sie möglicherweise keinen Zugriff auf props.location haben, um an die nav-Komponente zu übergeben.

Nehmen wir zum Beispiel - Wir hatten eine Header-Komponente in unserem Projekt, die im Routing-Switch enthalten war, um sie allen Routen zur Verfügung zu stellen.

<Switch>
  <Fragment>
    <Header/>
    <Route path='..' component={...}/>
    <Route path='..' component={...}/>
  </Fragment>
</Switch>

Im obigen Szenario gibt es keine Möglichkeit, die Positionsdaten an die Kopfkomponente zu übergeben.

Eine bessere Lösung wäre für uns das withRouter-HOC, wenn eine Komponente von Ihrem Router nicht gerendert wird .. Sie haben weiterhin Zugriff auf den Verlauf, die Übereinstimmung und den Speicherort der Routereigenschaften, wenn Sie sie in das withRouter-HOC packen:

import { withRouter } from 'react-router-dom'
.... 
....
export default withRouter(ThisComponent)
0
varoons

Ich konnte es mit den hier angegebenen Lösungen nicht lösen und hier ist, was für mich gearbeitet hat:

Ich habe history in meine Komponente importiert und history.location.pathname Einer Variablen zugewiesen, die ich später für die dynamische Stilmanipulation verwendet habe.

0
Arthur Burgan

reag-router v4

Aus Dokumentation :

  1. Die <Route>component-Eigenschaft sollte verwendet werden, wenn Sie über eine vorhandene Komponente verfügen. Die <Route>render-Eigenschaft nimmt eine Inline-Funktion an, die html zurückgibt.

  2. Ein <Route> ohne path stimmt immer überein.

Auf dieser Grundlage können wir einen <Route>-Wrapper für beliebige Ebene Ihrer HTML-Struktur erstellen. Es wird immer angezeigt und hat Zugriff auf das Positionsobjekt.

Wenn ein Benutzer zur /profile-Seite kommt, hat <header> gemäß Ihrer Anfrage den profile-header-Klassennamen.

<Router>
    <Route render={({ location }) =>
        <header className={location.pathname.replace(/\//g, '') + '-header'}>
            // header content...
        </header>

        <div id="content"></div>

        <footer></footer>
    } />
</Router>
0
Webars