React Router v4 - Comment obtenir la route actuelle?

Je voudrais afficher un titledans<AppBar /> qui est en quelque sorte passé de l'itinéraire actuel.

Dans React Router v4, comment pourrait- <AppBar />on faire passer la route actuelle dans son titleaccessoire?

  <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>

Y at - il un moyen de passer un titre personnalisé d'une coutume propsur <Route />?

Dans la version 5.1 de react-router, il existe un hook appelé useLocation , qui renvoie l'objet de localisation actuel. Cela peut être utile chaque fois que vous avez besoin de connaître l'URL actuelle.

import { useLocation } from 'react-router-dom'

function HeaderView() {
  let location = useLocation();
  console.log(location.pathname);
  return <span>Path : {location.pathname}</span>
}

Dans React Router 4, la route actuelle est en - this.props.location.pathname. Obtenez this.propset vérifiez. Si vous ne voyez toujours pas, location.pathnamevous devez utiliser le décorateurwithRouter .

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;
  }
}

Si vous utilisez des modèles, réagissent pour où la fin de votre fichier ressemble réagit comme ceci: export default SomeComponentvous devez utiliser le composant d'ordre supérieur (souvent désigné comme un « hoc »), withRouter.

Tout d'abord, vous devrez importer withRoutercomme suit:

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) à partir des accessoires. Plus précisément, location, matchet history. Le code pour cracher le chemin serait:

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

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

Voici une solution utilisant history Lire la suite

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

à l'intérieur du routeur

<Router>
   {history.location.pathname}
</Router>

Il y a un hook appelé useLocation dans react -router v5, pas besoin de HOC ou d'autres choses, c'est très succinct et pratique.

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

const ExampleComponent: React.FC = () => {
  const location = useLocation();  

  return (
    <Router basename='/app'>
      <main>
        <AppBar handleMenuIcon={this.handleMenuIcon} title={location.pathname} />
      </main>
    </Router>
  );
}

Je pense que l'auteur de React Router (v4) vient d'ajouter cela withRouter HOC pour apaiser certains utilisateurs. Cependant, je pense que la meilleure approche consiste simplement à utiliser un accessoire de rendu et à créer un simple composant PropsRoute qui transmet ces accessoires. Ceci est plus facile à tester car il ne "connecte" pas le composant comme le fait withRouter. Ayez un tas de composants imbriqués enveloppés dans withRouter et ce ne sera pas amusant. Un autre avantage est que vous pouvez également utiliser ce passage à travers les accessoires que vous souhaitez pour la Route. Voici l'exemple simple d'utilisation de 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: (remarquez pour obtenir les paramètres d'itinéraire (match.params), vous pouvez simplement utiliser ce composant et ceux-ci vous seront transmis)

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

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

notez également que vous pouvez également passer les accessoires supplémentaires que vous voulez de cette façon

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

A dit Con Posidielov , l'itinéraire actuel est présent this.props.location.pathname.

Mais si vous voulez faire correspondre un champ plus spécifique comme une clé (ou un nom), vous pouvez utiliser matchPath pour trouver la référence d'itinéraire d'origine.

import { matchPath } from `react-router`

const routes = [{
  key: 'page1'
  exact: true,
  path: '/page1/:someparam/',
  component: Page1,
},
{
  exact: true,
  key: 'page2',
  path: '/page2',
  component: Page2,
},
]

const currentRoute = routes.find(
  route => matchPath(this.props.location.pathname, route)
)

console.log(`My current route key is : ${currentRoute.key}`)

Ajouter

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

Puis changez votre exportation de composants

export default withRouter(ComponentName)

Ensuite, vous pouvez accéder à l'itinéraire directement dans le composant lui-même (sans rien toucher d'autre dans votre projet) en utilisant:

window.location.pathname

Testé en mars 2020 avec: "version": "5.1.2"