javascript - react 路由器 onChange

Question

路线改变时如何传递新的 Prop ？我需要根据路线更改舱位。

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 组件中获取 props 并检查 location.pathname

例如:在我的路线/我想要 header 类 home-page ，在/profile 路线上想要 profile-page 类。但是当我更改路线时 location.pathname 有 / 路线

如何查看更新的 Prop ？

我的 Miramir 组件中需要 nextState.location.pathname

Answer 1

当路由即将改变时，您可以提供onEnter钩子(Hook)。

例如

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

}