リアルータがメインルータコンポーネントの現在位置を取得する

Question

私は自分のルートを定義するために使用したコンポーネントから現在の位置を取得する方法を知りたいと思います。私は他のコンポーネントで行うようthis.props.location.pathnameにアクセスしようとすると、

class Routes extends React.Component { 
    render() { 
     return (
      <Router> 
       <Nav /> 
       <header>{customHeader}</header> 
       <Switch> 
        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        // Other routes 
       </Switch> 
      </Router> 
     ); 
    } 
}; 

は、しかし、それはundefinedを返します。たとえば、私はこのようなすべてのルートを、含まれているルートと呼ばれる部品を、持っています。

locationの情報にアクセスするには、他のコンポーネントでwithRouterを使用する必要があります。しかし、エラーが発生するので、Routesコンポーネントでは使用できません。

実際にはpathnameは必要ありません。特定のページにアクセスするときに別のヘッダーコンテンツを表示するため、ユーザーのルートを確認したいだけです。

Answer 1

常にレンダリングする<Route>でヘッダーを折り返します。そうすれば、小道具を使ってすべてにアクセスできます。

class Routes extends React.Component { 
    render() { 
     return (
      <Router> 
       <Nav /> 
       <Route render={(props) => { 
        console.log(props.location) 
        return (
        <header>{customHeader}</header> 
       ) 
       }} /> 

       <Switch> 
        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        // Other routes 
       </Switch> 
      </Router> 
     ); 
    } 
};