React Router v4-現在のルートを取得する方法？

現在のルートからなんとか渡されたtitlein を表示したい<AppBar />です。

React Router v4では<AppBar />、現在のルートをどのようにしてtitleプロップに渡すことができますか？

  <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には<Route />？

react-routerの5.1リリースには、現在の場所オブジェクトを返すuseLocationと呼ばれるフックがあります。これは、現在のURLを知る必要があるときに役立ちます。

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

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

反応ルータ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;
  }
}

reactのテンプレートを使用している場合、reactファイルの最後は次のようになります。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

ここに続きを使用したソリューションがありhistory ます

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

ルーター内部

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

react-router v5にはuseLocationと呼ばれるフックがあり、HOCやその他のものは必要ありません。非常に簡潔で便利です。

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

著者のReact Router（v4）がwithRouter HOCを追加して、特定のユーザーをなだめるようにしたと思います。ただし、より良いアプローチは、レンダープロップを使用して、それらのプロップを渡す単純なPropsRouteコンポーネントを作成することです。これは、withRouterのようにコンポーネントを「接続」しないため、テストが簡単です。withRouterでラップされたネストされたコンポーネントの束を持っていると、それは楽しくありません。別の利点は、あなたがルートにしたいどんな小道具でもこのパスを使うことができることです。以下はレンダープロップを使用した簡単な例です。（かなり正確に彼らのウェブサイト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 } />

たコンPosidielovは、現在のルートが存在である、と述べましたthis.props.location.pathname。

ただし、キー（または名前）などのより具体的なフィールドを照合する場合は、matchPathを使用して元のルート参照を検索できます。

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

追加

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

次に、コンポーネントのエクスポートを変更します

export default withRouter(ComponentName)

次に、以下を使用して、コンポーネント内で直接（プロジェクト内の他の部分に触れることなく）ルートにアクセスできます。

window.location.pathname

2020年3月、「バージョン」：「5.1.2」でテスト済み