React Router v4 - Как получить текущий маршрут?

Я хотел бы отобразить title в <AppBar />, который каким-то образом передается с текущего маршрута.

В React Router v4, как <AppBar /> сможет получить текущий маршрут, пройденный в него 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>

Есть ли способ передать пользовательский заголовок из пользовательского prop on <Route />?

Ответ 1

Я думаю, что автор React Router (v4) просто добавил, что с Router HOC, чтобы успокоить некоторых пользователей. Однако я считаю, что лучший подход заключается в том, чтобы просто использовать render prop и создать простой компонент PropsRoute, который передает эти реквизиты. Это легче проверить, так как вы не "подключаете" компонент, например, с помощью Router. Имейте кучу вложенных компонентов, завернутых в Router, и это не будет весело. Другим преимуществом является то, что вы также можете использовать этот пропуск через любые реквизиты, которые вы хотите на Маршрут. Вот простой пример использования render prop. (в значительной степени точный пример с их сайта 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;

использование: (уведомление для получения параметров маршрута (match.params) вы можете просто использовать этот компонент, и те будут переданы вам)

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

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

также обратите внимание, что вы могли бы передать все дополнительные реквизиты, которые хотите этого

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

Ответ 2

В ответном маршрутизаторе 4 текущий маршрут находится в - this.props.location.pathname. Просто получите this.props и проверьте. Если вы все еще не видите location.pathname, вы должны использовать декоратор withRouter.

Это может выглядеть примерно так:

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

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

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

    }

Ответ 3

Если вы используете шаблоны реагирования, где конец вашего файла реакции выглядит следующим образом: export default SomeComponent вам нужно использовать компонент более высокого порядка (часто называемый "HOC"), withRouter.

Во-первых, вам нужно импортировать с помощью withRouter так:

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

Затем вы захотите использовать withRouter. Вы можете сделать это, изменив экспорт компонентов. Вероятно, вы хотите изменить export default ComponentName для export default withRouter(ComponentName).

Затем вы можете получить маршрут (и другую информацию) от реквизита. В частности, location, match и history. Код для вышивания имени пути будет следующим:

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

Хорошая запись с дополнительной информацией доступна здесь: https://reacttraining.com/react-router/core/guides/philosophy