React Router v4 - Como obter a rota atual?

Eu gostaria de exibir um titleem <AppBar />que é de alguma forma passou no da rota atual.

No React Router v4, como seria <AppBar />possível obter a rota atual passada para o seu 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>

Existe uma maneira de passar um título personalizado a partir de um costume propem <Route />?

Na versão 5.1 do react -router, há um gancho chamado useLocation , que retorna o objeto de localização atual. Isso pode ser útil sempre que você precisar conhecer o URL atual.

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

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

No roteador de reação 4, a rota atual está em - this.props.location.pathname. Basta obter this.propse verificar. Se você ainda não vê location.pathname, deve usar o decorador withRouter.

Isso pode ser algo como isto:

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

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

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

Se você estiver usando os modelos do react, onde o final do seu arquivo de reação se parece com o seguinte: export default SomeComponentvocê precisa usar o componente de ordem superior (geralmente chamado de "HOC") withRouter,.

Primeiro, você precisará importar da seguinte withRoutermaneira:

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

Em seguida, você vai querer usar withRouter . Você pode fazer isso alterando a exportação do seu componente. É provável que você queira mudar de export default ComponentNamepara export default withRouter(ComponentName).

Em seguida, você pode obter a rota (e outras informações) dos adereços. Especificamente, location, match, e history. O código para cuspir o nome do caminho seria:

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

Uma boa redação com informações adicionais está disponível aqui: https://reacttraining.com/react-router/core/guides/philosophy

Aqui está uma solução usando history Leia mais

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

dentro do roteador

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

Existe um gancho chamado useLocation no react -router v5, não há necessidade de HOC ou outras coisas, é muito sucinto 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>
  );
}

Acho que os autores do React Router (v4) acabaram de adicionar isso ao Router HOC para apaziguar certos usuários. No entanto, acredito que a melhor abordagem é usar apenas prop prop e criar um simples componente PropsRoute que passe esses props. Isso é mais fácil de testar, pois você não "conecta" o componente como o Router. Tenha um monte de componentes aninhados envolvidos com o Router e não será divertido. Outro benefício é que você também pode usar esse passe através de quaisquer acessórios que desejar para a Rota. Aqui está o exemplo simples usando render prop. (praticamente o exemplo exato do site 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;

use: (aviso para obter os parâmetros de rota (match.params), você pode simplesmente usar este componente e esses serão passados ​​para você)

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

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

Observe também que você também pode passar quaisquer adereços extras que desejar dessa maneira

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

Tem Con Posidielov disse, a rota atual está presente em this.props.location.pathname.

Mas se você quiser corresponder a um campo mais específico, como uma chave (ou um nome), use matchPath para encontrar a referência de rota original.

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

Adicionar

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

Em seguida, altere a exportação de componentes

export default withRouter(ComponentName)

Em seguida, você pode acessar a rota diretamente no próprio componente (sem tocar em mais nada no seu projeto) usando:

window.location.pathname

Testado em março de 2020 com: "version": "5.1.2"