Question

路线改变后如何传递新道具？我需要改变班级取决于路线。

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 route想要profile-page类。但是当我更改路线时location.pathname有/路线

如何检查更新道具？

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

Answer 1

当路线即将发生变化时，您可以提供onEnter挂钩。

例如

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

}

Answer 2

如果您的组件是路由组件，就像在您的情况下一样，它将获得路由器本身注入的一些道具。您将获得当前位置，参数等等，因此您只需在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

反应路由器onChange

2 个答案: