React Router v4 - Comment obtenir l'itinéraire actuel?

Question

Je voudrais afficher un title dans <AppBar /> qui est en quelque sorte transmis de la route actuelle.

Dans React Router v4, comment <AppBar /> parviendrait-il à faire passer l'itinéraire actuel à son title prop?

   <Router basename='/app'>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>
 

Existe-t-il un moyen de passer un titre personnalisé à partir de prop sur <Route /> ?

Answer 1

Dans le routeur de réaction 4, la route actuelle est en - this.props.location.pathname . Il suffit d’obtenir this.props et de vérifier. Si vous ne voyez toujours pas location.pathname vous devez utiliser le décorateur withRouter .

Cela pourrait ressembler à ceci:

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

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}
 

Answer 2

Si vous êtes à l'aide de réagir de modèles, où la fin de votre réagissent fichier ressemble à ceci: export default SomeComponent vous devez utiliser de la plus grande composante de l'ordre (souvent désigné comme un "ad HOC"), withRouter.

Tout d'abord, vous aurez besoin d'importer withRouter comme:

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

Ensuite, vous aurez envie d' utiliser withRouter. Vous pouvez le faire par le changement de votre composant à l'exportation. Il est probable que vous voulez modifier à partir d' export default ComponentName de export default withRouter(ComponentName).

Ensuite, vous pouvez obtenir l'itinéraire (et autres informations) de accessoires. Plus précisément, location, match, et history. Le code à cracher le chemin serait:

console.log(this.props.location.pathname);

Un bon article avec des informations supplémentaires sont disponibles ici: https://reacttraining.com/react-router/core/guides/philosophy

Answer 3

Je pense que l'auteur de Réagir Routeur (v4) de la juste ajouté que withRouter HOC pour apaiser certains utilisateurs. Cependant, je crois que la meilleure approche est d'utiliser le rendu d'accessoires et de faire un simple PropsRoute composant qui passe ces accessoires. C'est plus facile à tester comme vous, il ne veut pas "se connecter" du composant comme withRouter. Avoir un tas de composants imbriqués enveloppé dans withRouter et il ne va pas être amusant. Un autre avantage est que vous pouvez également utiliser ce pass par tous les accessoires que vous voulez de la Route. Voici l'exemple simple utilisant les rendre prop. (assez bien l'exemple précis de leur site web https://reacttraining.com/react-router/web/api/Route/render-func) (src/composants/routes/accessoires-route)

import React from 'react';
import { Route } from 'react-router';

export const PropsRoute = ({ component: Component, ...props }) => (
  <Route
    { ...props }
    render={ renderProps => (<Component { ...renderProps } { ...props } />) }
  />
);

export default PropsRoute;

utilisation: (avis à obtenir l'itinéraire params (match.params), vous pouvez simplement utiliser ce composant et ceux-ci seront transmis pour vous)

import React from 'react';
import PropsRoute from 'src/components/routes/props-route';

export const someComponent = props => (<PropsRoute component={ Profile } />);

notez également que vous pouvez passer quel que soit extra accessoires que vous voulez de cette façon aussi

<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />