React Router v4 - Come ottenere il percorso corrente?

Vorrei visualizzare un titlein <AppBar />che è in qualche modo passato dalla rotta corrente.

In React Router v4, come sarebbe <AppBar />possibile far passare il percorso corrente nel suo titleprop?

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

C'è un modo per passare un titolo personalizzato da un'abitudine propin poi <Route />?

Nella versione 5.1 di reagire-router è presente un hook chiamato useLocation , che restituisce l'oggetto posizione corrente. Questo potrebbe essere utile ogni volta che è necessario conoscere l'URL corrente.

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

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

Nel reagente router 4 il percorso corrente è in - this.props.location.pathname. Basta ottenere this.propse verificare. Se ancora non vedi location.pathname, dovresti usare il decoratore withRouter.

Questo potrebbe assomigliare a questo:

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

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

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

Se si utilizza reagire dei modelli, dove alla fine del tuo reagiscono sguardi di file come questo: export default SomeComponentè necessario utilizzare il componente di ordine superiore (spesso definito come un "hoc"), withRouter.

Innanzitutto, dovrai importare in questo withRoutermodo:

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

Successivamente, ti consigliamo di utilizzare withRouter . Puoi farlo modificando l'esportazione del tuo componente. È probabile che tu voglia cambiare da export default ComponentNameaexport default withRouter(ComponentName) .

Quindi puoi ottenere il percorso (e altre informazioni) dagli oggetti di scena. Specificamente, location, match, e history. Il codice per sputare il percorso sarebbe:

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

Un buon articolo di scrittura con informazioni aggiuntive è disponibile qui: https://reacttraining.com/react-router/core/guides/philosophy

Ecco una soluzione utilizzando history Leggi di più

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

all'interno del router

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

C'è un hook chiamato useLocation in reag -router v5, non c'è bisogno di HOC o altre cose, è molto sintetico e conveniente.

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

Penso che l'autore di React Router (v4) abbia appena aggiunto che con Router HOC per placare alcuni utenti. Tuttavia, credo che l'approccio migliore sia semplicemente usare il rendering prop e creare un semplice componente PropsRoute che passi questi oggetti di scena. Questo è più facile da testare perché non "connette" il componente come fa conouter. Avere un sacco di componenti nidificati avvolti inRouter e non sarà divertente. Un altro vantaggio è che puoi anche usare questo passaggio attraverso qualunque oggetto tu desideri sulla rotta. Ecco il semplice esempio usando render prop. (praticamente l'esempio esatto dal loro sito web https://reacttraining.com/react-router/web/api/Route/render-func ) (src / components / route / 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;

utilizzo: (avviso per ottenere i parametri del percorso (match.params) puoi semplicemente usare questo componente e questi saranno passati per te)

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

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

nota anche che puoi passare qualunque cosa tu voglia in questo modo

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

Ha detto Con Posidielov , l'attuale percorso è presente in this.props.location.pathname.

Ma se vuoi abbinare un campo più specifico come una chiave (o un nome), puoi usare matchPath per trovare il riferimento del percorso originale.

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}`)

Inserisci

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

Quindi modifica l'esportazione dei componenti

export default withRouter(ComponentName)

Quindi puoi accedere al percorso direttamente all'interno del componente stesso (senza toccare nient'altro nel tuo progetto) usando:

window.location.pathname

Testato a marzo 2020 con: "versione": "5.1.2"