React Router V4正在更新URL,但没有刷新(React,Redux)

Question

我正在尝试使用React-Router V4将路由添加到我的应用程序,但它根本不起作用.基本上,我正在尝试以编程方式更改路径history.push,即更新浏览器URL,但不更改实际应用程序内的任何内容.

注意:我使用的是redux.

关于这个问题,唯一回答的问题是:

React history.push()正在更新url但不在浏览器中导航到它

但是,我已经尝试了上述问题的答案,但它对我不起作用.

以下是重要的片段:

最顶层的文件(index.js)

...
ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App/>
        </Provider>
    </BrowserRouter>
    , document.getElementById('root'));
...

包含路线的组件

...
export default function ContentRouter() {
    return <div className="content">
        <Route exact path="/dashboard" component={TmpDashboard}/>
        <Route exact path="/" component={() => {
            return <h1>Home</h1>
        }}/>
    </div>
}

组件推送路线

...
this.handleGroupClick = (group) => {
    this.props.history.push(`/groups/${group}`);
    this.props.onOpenChange(false);
};
...
export default withRouter(connect(mapStateToProps, mapDispatchToProps(DrawerConnector))

Answer 1

在完全错误的地方进行了大量搜索之后,我发现了什么是错的.Redux导致缺乏更新

每当组件被包装在connect其中时,都会阻止更新,并且视图不会更新.

解决方案在这里提到:

https://github.com/ReactTraining/react-router/issues/4671#issuecomment-285320076

基本上,每个包含一个Route或一个React-Router事件的组件都必须用它包装withRouter

编辑:只connect应包含使用的顶级组件withRouter.请注意,这可能会导致性能问题

编辑:我解决增加耦合的方式是有一个组件来处理路由.这样,我只需要包装该组件,并将组件包含在路由器中.