React:找不到使用react-router的阻塞组件

时间:2018-05-10 10:03:03

标签: reactjs react-router react-router-v4

我认为这是由于我如何更新位置,但我不确定。

我这样做是这样的:

<Route render={props => <Somecomponent location={props.location} /> } />

然后在Somecomponent中执行以下操作:

someAction(context){
   globals.context = context
   // some other stuff that triggers an event ELSEWHERE
   // that event will update the location via this context variable
}

...
render(){
 return <Route render={context => {
       return <div onClick={() => this.someActionThatChangesLocation(context)}

}} /&GT;     }

ELSEWHERE:

someEvent(){
   globals.context.history.push("/newlocation")
}

会发生什么,URL会更新但不会更新。所以我坚持旧观点。

如何找出阻止渲染的组件?

我添加了位置道具,因为我读到了那会使触发器重新出现但它不起作用所以我认为阻塞组件是另一个。

我不确定如何进一步调试..

1 个答案:

答案 0 :(得分:0)

所以我不确定究竟是什么解决了这个问题,因为我改变了很多,直到它最终奏效。

  1. 我的应用程序组件现在包装如下:

    class AppWrapper extends Component { render() { return <Router> <Route component={withRouter(App)} /> </Router> } }

  2. 我不再使用globals.context,因为现在我可以访问App.js组件中的this.props.history

  3. 我确保这是我应用中唯一的路由器。在我的应用程序和Wrapper中有路由器组件之前,我认为由于某种原因阻止了更新,但不确定。