web-dev-qa-db-ja.com

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

現在のルートから何らかの形で渡された<AppBar />にtitleを表示したいのですが。

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>

<Route />のカスタムpropからカスタムタイトルを渡す方法はありますか？

reactjsreact-routerreact-router-v4
85
Raphael Rafatpanah

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

反応ファイルの末尾が次のようになっているactのテンプレートを使用している場合：export default SomeComponentあなたは高次のコンポーネント（しばしば "HOC"と呼ばれる）、withRouterを使う必要があります。

まず、withRouterをインポートする必要があります。

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

次に、usewithRouterにします。コンポーネントのエクスポートを変更することによってこれを行うことができます。おそらくexport default ComponentNameからexport default withRouter(ComponentName)に変更したいでしょう。

それからあなたは小道具から経路（そして他の情報）を得ることができます。具体的には、location、match、およびhistoryです。パス名を書き出すコードは次のようになります。

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

追加情報を含む良い記事はここにあります： https://reacttraining.com/react-router/core/guides/philosophy

35
lowcrawler

React Router（v4）の作者は、特定のユーザーをなだめるためにwithRouter HOCを付け加えたと思います。しかし、私はより良いアプローチは単にレンダリングプロップを使用してそれらのプロップを渡す単純なPropsRouteコンポーネントを作ることだと思います。 withRouterのようにコンポーネントを「接続」していないので、これはテストが簡単です。たくさんの入れ子になったコンポーネントをRoutersでラップしておくと、面白くないでしょう。もう一つの利点はあなたがあなたがルートに望むどんな小道具でもこのパスを使うことができるということです。これは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 } />
8
hal9000