React Router v4 - comment obtenir la route actuelle?
j'aimerais afficher un title<AppBar /> c'est en quelque sorte passé par la route actuelle.
À Réagir Routeur v4, comment serait -<AppBar /> être en mesure d'obtenir l'itinéraire actuel, passé dans 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>
Est-il un moyen de passer un titre personnalisé à partir d'un custom prop<!--6?
3 réponses
je pense que L'auteur de React Router (v4) vient d'ajouter que withRouter HOC pour apaiser certains utilisateurs. Cependant, je crois que la meilleure approche est d'utiliser simplement le rendu prop et de faire un composant simple PropsRoute qui passe ces étançons. C'est plus facile à tester car vous ne "connectez" pas le composant comme withRouter le fait. 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 passer à travers tous les accessoires que vous voulez Route. Voici un exemple simple d'utilisation de renderprop. (à peu près l'exemple exact 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 } />);
remarquez aussi que vous pouvez passer tous les accessoires supplémentaires que vous voulez de cette façon aussi
<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />
dans le routeur react 4 la route actuelle est en -
this.props.location.pathname.
Juste obtenir this.props et vérifier.
Si vous ne voyez toujours pas location.pathname alors vous devriez utiliser le décorateur withRouter.
Cela pourrait ressembler à quelque chose comme ceci:
import {withRouter} from 'react-router-dom';
...
const SomeComponent = withRouter(props => <MyComponent {...props}/>);
class MyComponent extends React.Component {
...
SomeMethod () {
const {pathname} = this.props.location;
...
}
...
}
si vous utilisez les templates de react, où la fin de votre fichier react ressemble à ceci:export default SomeComponent vous Vous avez besoin pour l'utilisation de la plus grande composante de l'ordre, withRouter.
tout d'Abord, vous aurez besoin d'importer withRouter:
import {withRouter} from 'react-router-dom';
Ensuite, vous aurez envie de utiliser withRouter. Vous pouvez le faire en modifiant l'exportation de vos composants... à partir de export default ComponentNameexport default withRouter(ComponentName).
alors vous pouvez obtenir la route (et d'autres informations) à l'intérieur des accessoires. Plus précisément, location, match et history. Le code pour cracher le nom de chemin serait console.log(this.props.location.pathname);
Un bon article est disponible ici: https://reacttraining.com/react-router/core/guides/philosophy