web-dev-qa-db-fra.com

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

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

Dans React Router v4, comment <AppBar /> serait-il en mesure de faire passer la route actuelle dans 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 transmettre un titre personnalisé à partir d'un fichier personnalisé prop sur <Route />?

reactjsreact-routerreact-router-v4
100
Raphael Rafatpanah

Dans le routeur de réaction 4, la route actuelle est dans - this.props.location.pathname. Il suffit d’obtenir this.props et de le 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;
  }
}
149
Con Posidielov

Si vous utilisez les modèles de react, où la fin de votre fichier de réaction ressemble à ceci: export default SomeComponent, vous devez utiliser le composant d'ordre supérieur (souvent appelé "HOC"), withRouter.

Tout d'abord, vous devez importer withRouter comme ceci:

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

Ensuite, vous voudrez utiliser withRouter. Vous pouvez le faire en modifiant l'exportation de votre composant. Il est probable que vous souhaitiez passer de export default ComponentName à export default withRouter(ComponentName).

Ensuite, vous pouvez obtenir l'itinéraire (et d'autres informations) auprès des accessoires. Plus précisément, location, match et history. Le code pour cracher le chemin serait:

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

Une bonne rédaction avec des informations supplémentaires est disponible ici: https://reacttraining.com/react-router/core/guides/philosophy

44
lowcrawler

Je pense que l'auteur de React Router (v4) vient d'ajouter que withRouter HOC pour apaiser certains utilisateurs. Cependant, je pense que la meilleure approche consiste simplement à utiliser render access et à créer un composant simple PropsRoute qui transmet ces accessoires. Ceci est plus facile à tester car vous ne "connectez" pas le composant comme le fait withRouter. Ayez un tas de composants imbriqués dans Routeur et ça ne va pas être amusant. Un autre avantage est que vous pouvez également utiliser ce laissez-passer avec les accessoires de votre choix. Voici l'exemple simple utilisant render prop. (à peu près l'exemple exact de leur site Web https://reacttraining.com/react-router/web/api/Route/render-func ) (src/components/routes/props-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: (remarque pour obtenir les paramètres de route (match.params) vous pouvez simplement utiliser ce composant et ceux-ci seront passés 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 tout ce que vous voulez de cette façon aussi

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