反応ルータが子コンポーネント内のこの.props.locationを取得する

Question

私が理解しているように、Applocationとparamsのようなルーティング関連の小道具は<Route path="/" component={App} />となります。

は、ネストされた子コンポーネントのルートを作成するウィンドウオブジェクトを使用してアプリケーション

から小道具を渡す

• ：私のAppコンポーネントは、多くのネストされた子コンポーネントを持っている場合、どのように私は、子コンポーネントがなく、これらの小道具へのアクセス権を持っているのですか

this.context.routerにはルートに関する情報があると思っていましたが、this.context.routerにはルートを操作する機能しかないようです。あなたのコンポーネント小道具にmatch、historyとlocationを注入するためにwithRouter HOCを使用することができます

Answer 1

（更新）V4

。あなたのコンポーネント小道具にrouter、params、location、routesを注入するためにwithRouter HOCを使用することができます

class Child extends React.Component { 
    static propTypes = { 
    match: PropTypes.object.isRequired, 
    location: PropTypes.object.isRequired, 
    history: PropTypes.object.isRequired 
    } 

    render() { 
    const { match, location, history } = this.props 

    return (
     <div>{location.pathname}</div> 
    ) 
    } 
} 

export default withRouter(Child) 

（更新）V3

。

class Child extends React.Component { 

    render() { 
    const { router, params, location, routes } = this.props 

    return (
     <div>{location.pathname}</div> 
    ) 
    } 
} 

export default withRouter(Child) 

オリジナル答え

あなたが小道具を使用しない場合React Router documentation

まずで説明したように、あなたはコンテキストを使用することができ、あなたのchildContextTypesとgetChildContextを設定する必要があります

class App extends React.Component{ 

    getChildContext() { 
    return { 
     location: this.props.location 
    } 
    } 

    render() { 
    return <Child/>; 
    } 
} 

App.childContextTypes = { 
    location: React.PropTypes.object 
} 

次に、あなたの場所オブジェクトにアクセスできますアプリケーションコンポーネントでこの

class Child extends React.Component{ 

    render() { 
    return (
     <div>{this.context.location.pathname}</div> 
    ) 
    } 

} 

Child.contextTypes = { 
    location: React.PropTypes.object 
}