2017-02-03 19 views
0

ルートが変更されたときに新しい小道具を渡す方法は? 私はルートに依存する変更クラスが必要です。react router onChange

export class Routes extends React.Component<any, any> { 
constructor(props:any){ 
    super(props); 
} 
handleChange = (prevState, nextState, replaceState) => { 
    console.log(nextState.location.pathname); 
}; 
render(){ 
    return(
     <Router {...this.props}> 
      <Route path="/" onChange={this.handleChange} component={Miramir}> 
       <Route path="/about"> 
        <IndexRoute component={Miramir}></IndexRoute> 
       </Route> 
       <Route path="/contact"> 
        <IndexRoute component={Miramir}></IndexRoute> 
       </Route> 
       <Route path="/profile"> 
        <IndexRoute component={Profile} /> 
        <Route path="/profile/update" component={ProfileUpdate} /> 
        <Route path="/profile/login" component={LogInPage} /> 
       </Route> 
      </Route> 
     </Router> 
    ) 
    } 
} 

私はMiramirコンポーネントで小道具を取得し、例えばlocation.pathname

をチェックしようとしている:私のルートで/私は、ヘッダークラ​​スhome-pageをしたいと/プロファイルのルート上にはprofile-pageクラスをしたいです。 しかし、私がルートを変更するときlocation.pathname/ルートを持っています

アップデート小道具をチェックするには?

私はルートが変更されるときは、onEnterフックを提供することができ、私のMiramirコンポーネント

+1

わからない、これはあなたを助けることができるかどうbrowserHistory.listen(所在地=> {//ここに自分のものを行います});ここでパスに基づいてあなたのコードを行うことができます –

答えて

1

nextState.location.pathnameを必要としています。

例えば

<Route 
    path="/profile/update" 
    component={ProfileUpdate} 
    onEnter={onProfileUpdate} 
/> 

それはあなたのケースでは、それはいくつかの小道具で、それに注入されますされるように、あなたのコンポーネントは、ルート要素であるなら、あなたはonProfileUpdate

function onProfileUpdate(nextState, replace, callback) { 

    replace({ 
     pathname: '/transition path name here', 
     state: { nextPathname: nextState.location.pathname } 
    }); 

} 
+0

Miramirコンポーネントに変更されたときに 'nextState.location.pathname'を渡す方法はありますか? あなたの解決策は私が必要とするものではありません:) 助けてくれてありがとう –

+0

はい、同じように、インデックスルートにonEnterフックを使うだけです。 nextPathnameはコンポーネントの状態で利用可能になります。 – WitVault

0

、その関数を定義することができますルータ自身。あなたは現在の位置、パラメータなどを取得するので、単にrenderメソッドでその値を読み取り、それに応じて行動することができます。

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#injected-props

あなたのツリーに深く住んでいるコンポーネントで何かにアクセスする必要がある場合は、withRouter HOCでそれをラップすることができます。

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#withroutercomponent-options