React Router v4 – Comment obtenir l’itinéraire actuel?

Je voudrais afficher un title dans qui soit en quelque sorte transmis depuis l’itinéraire actuel.

Dans React Router v4, comment serait-il capable de transmettre la route actuelle à son title prop?

          

Existe-t-il un moyen de transmettre un titre personnalisé à partir d’un prop personnalisé sur ?

    Je pense que l’auteur de React Router (v4) vient d’append cela avec Routeur HOC pour apaiser certains utilisateurs. Cependant, je pense que la meilleure approche consiste à simplement utiliser prop prop et créer un simple composant PropsRoute qui transmet ces objects. C’est plus facile à tester car vous ne “connectez” pas le composant comme le fait withRouter. Avoir un tas de composants nesteds emballés avecRouter et ça ne va pas être amusant. Un autre avantage est que vous pouvez également utiliser ce passage à travers les accessoires que vous voulez sur la Route. Voici l’exemple simple utilisant prop 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 }) => (  () } /> ); export default PropsRoute; 

    utilisation: (remarquez pour obtenir les parameters 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 => (); 

    remarquez également que vous pourriez passer les accessoires supplémentaires que vous voulez de cette façon aussi

      

    Dans le routeur de réaction 4, la route actuelle est dans – 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 avec withRouter .

    Cela pourrait ressembler à ceci:

      import {withRouter} from 'react-router-dom'; ... const SomeComponent = withRouter(props => ); class MyComponent extends React.Component { ... SomeMethod () { const {pathname} = this.props.location; ... } ... } 

    Si vous utilisez les modèles de réaction, où la fin de votre fichier de réaction se présente comme export default SomeComponent : export default SomeComponent you Vous devez utiliser le composant d’ordre supérieur, withRouter .

    D’abord, vous devrez importer avecRouter: import {withRouter} from 'react-router-dom';

    Ensuite, vous voudrez utiliser withRouter. Vous pouvez le faire en modifiant l’exportation de vos composants … à partir de export default ComponentName pour export default withRouter(ComponentName) .

    Ensuite, vous pouvez obtenir l’itinéraire (et d’autres informations) à partir des accessoires. Plus précisément, location , match et history . Le code pour cracher le chemin serait console.log(this.props.location.pathname);

    Un bon résumé est disponible ici: https://reacttraining.com/react-router/core/guides/philosophy