web-dev-qa-db-fra.com

réagir routeur this.props.location

J'ai besoin d'une aide avec react-router v2 + Je dois changer la classe de la barre de navigation lorsque route est modifiée Par exemple, pour route /profile className sera "profile-header" J'ai essayé d'utiliser this.props.location dans le composant navbar mais il affiche undefined

J'espère que votre aide 

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

Votre composant navbar (comme vous l'avez décrit dans votre question) n'est probablement pas le composant route, n'est-ce pas? Par route component, j'entends celui que vous utilisez dans votre configuration react-router qui est chargé pour un itinéraire spécifique.

this.props.location est accessible uniquement sur ce route component, vous devez donc le transmettre à votre navbar.

Prenons un exemple:

Votre configuration de routeur:

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

Composante de route App:

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

Il peut arriver que vous n'ayez pas accès à la propriété props.location à transmettre à la composante nav.

Prenons l'exemple de notre projet. Notre projet comportait un en-tête inclus dans le commutateur de routage pour le rendre disponible pour tous les itinéraires.

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

Dans le scénario ci-dessus, il n'existe aucun moyen de transmettre les données d'emplacement au composant En-tête.

Une meilleure solution serait pour nous le HOC withRouter lorsqu'un composant n'est pas rendu par votre routeur . Vous aurez toujours accès à l'historique des propriétés du routeur, à la correspondance et à l'emplacement lorsque vous l'enroulez dans le HOC withRouter

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

react-router v4

De documentation :

  1. La propriété <Route>component doit être utilisée lorsque vous avez un composant existant. <Route>render La propriété prend une fonction inline, qui renvoie le code HTML.

  2. Un <Route> sans path correspondra toujours.

Sur cette base, nous pouvons créer un wrapper <Route> en n'importe quel niveau de votre structure HTML. Il sera toujours affiché et aura accès à l'objet de localisation.

Selon votre demande, si un utilisateur accède à la page /profile, le <header> aura le nom de classe profile-header.

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

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

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