React Router v4 - Mevcut rotayı nasıl alabilirim?

Bir şekilde geçerli rotadan aktarılan bir titlein görüntülemek istiyorum <AppBar />.

React Router v4'te <AppBar />mevcut rotayı titlepervanesine nasıl geçirebiliriz ?

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

Özel gönderen bir özel başlık geçirmek için bir yolu var mı propüzerinde <Route />?

Reaksiyon yönlendiricinin 5.1 sürümünde , geçerli konum nesnesini döndüren useLocation adlı bir kanca vardır . Bu, geçerli URL'yi bilmeniz gerektiğinde yararlı olabilir.

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

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

Reaksiyon yönlendiricisinde 4 geçerli rota - this.props.location.pathname. Sadece alın this.propsve doğrulayın. Hala görmüyorsanız location.pathname, dekoratörü kullanmalısınız withRouter.

Bu şöyle görünebilir:

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

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

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

Reaksiyon dosyanızın sonunun şöyle göründüğü reaksiyon şablonlarını kullanıyorsanız: export default SomeComponentdaha yüksek dereceli bileşeni (genellikle "HOC" olarak adlandırılır) kullanmanız gerekir withRouter.

İlk olarak şu şekilde içe aktarmanız gerekir withRouter:

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

Ardından, kullanmak isteyeceksiniz withRouter. Bunu, bileşeninizin dışa aktarımını değiştirerek yapabilirsiniz. Büyük olasılıkla size değiştirmek istediğiniz oluyor export default ComponentNameiçin export default withRouter(ComponentName).

Sonra sahne (ve diğer bilgileri) sahne alabilirsiniz. Özellikle, location, match, ve history. Yol adına tükürmek için kod:

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

Ek bilgiler içeren iyi bir yazı bulabilirsiniz: https://reacttraining.com/react-router/core/guides/philosophy

İşte kullanarak bir çözümdür history devamını oku

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

yönlendirici içinde

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

Reat -router v5'de useLocation adlı bir kanca var , HOC veya diğer şeylere gerek yok, çok kısa ve kullanışlı.

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

Ben React Router (v4) yazarının sadece bazı kullanıcıları yatıştırmak için Router HOC ile ekledi düşünüyorum. Ancak, daha iyi bir yaklaşım sadece render prop kullanmak ve bu sahne geçen basit bir PropsRoute bileşeni yapmak olduğuna inanıyorum. Bileşeni withRouter'ın yaptığı gibi “bağlama ”dığınız için bunu test etmek daha kolaydır. Yönlendiriciye sarılmış bir grup iç içe bileşen var ve eğlenceli olmayacak. Diğer bir avantajı da bu geçişi Güzergahta istediğiniz sahne boyunca kullanabilmenizdir. İşte render prop kullanarak basit örnek. (web sitelerinden hemen hemen kesin örnek https://reacttraining.com/react-router/web/api/Route/render-func ) (src / bileşenler / yollar / sahne-rota)

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;

kullanım: (rota parametrelerini (match.params) almanız için bu bileşeni kullanabilirsiniz ve bunlar sizin için geçirilecektir)

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

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

ayrıca bu şekilde istediğiniz ekstra desteği de geçebileceğinizi unutmayın.

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

Has Con Posidielov söyledi, şimdiki rota mevcuttur this.props.location.pathname.

Ancak, bir anahtar (veya ad) gibi daha spesifik bir alanı eşleştirmek istiyorsanız , orijinal rota referansını bulmak için matchPath'i kullanabilirsiniz .

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

Ekle

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

Ardından bileşen dışa aktarma işleminizi değiştirin

export default withRouter(ComponentName)

Ardından, rotayı doğrudan bileşenin kendisinden (projenizdeki herhangi bir şeye dokunmadan) erişebilirsiniz:

window.location.pathname

Mart 2020'de "sürüm": "5.1.2" ile test edildi